From 756c2ff7fc6f3bbe4dd767e13b0595b85a7b4d30 Mon Sep 17 00:00:00 2001
From: zhouc <zhouc@yunemao.com>
Date: Tue, 4 Mar 2025 15:52:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0pdf=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pdf/splitbypage/index.vue | 124 ++++++++++++++++++++++++++++
 src/views/pdf/turnimages/index.vue  | 118 ++++++++++++++++++++++++++
 2 files changed, 242 insertions(+)
 create mode 100644 src/views/pdf/splitbypage/index.vue
 create mode 100644 src/views/pdf/turnimages/index.vue

diff --git a/src/views/pdf/splitbypage/index.vue b/src/views/pdf/splitbypage/index.vue
new file mode 100644
index 0000000..c3628d4
--- /dev/null
+++ b/src/views/pdf/splitbypage/index.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { InboxOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import type { UploadChangeParam } from 'ant-design-vue'
+
+const fileList_left = ref([])
+function handleChange_left(info: UploadChangeParam) {
+  const status = info.file.status
+  if (status !== 'uploading')
+    console.log(info.file, info.fileList)
+
+  if (status === 'done') {
+    info.fileList.find(item => item.url)
+    message.success(`${info.file.name} file uploaded successfully.`)
+  }
+  else if (status === 'error') {
+    message.error(`${info.file.name} file upload failed.`)
+  }
+}
+
+function handleDrop_left(e: DragEvent) {
+  console.log(e)
+}
+
+const fileList = ref([])
+function handleChange(info: UploadChangeParam) {
+  const status = info.file.status
+  if (status !== 'uploading')
+    console.log(info.file, info.fileList)
+
+  if (status === 'done')
+    message.success(`${info.file.name} file uploaded successfully.`)
+  else if (status === 'error')
+    message.error(`${info.file.name} file upload failed.`)
+}
+
+function handleDrop(e: DragEvent) {
+  console.log(e)
+}
+</script>
+
+<template>
+  <a-row>
+    <a-col :span="12">
+      <div class="split_style">
+        拆分前文件
+      </div>
+      <div class="style_left">
+        <a-upload-dragger
+          v-model:fileList="fileList_left"
+          name="file"
+          :multiple="true"
+          action="http://localhost:85/dev-api/infra/file/upload"
+          @change="handleChange_left"
+          @drop="handleDrop_left"
+        >
+          <!--          :headers="{ Authorization: 'Bearer 4386f0392a6642cead5f419db84bd83b' }" -->
+          <p class="ant-upload-drag-icon">
+            <inbox-outlined />
+          </p>
+          <p class="ant-upload-text">
+            单击或拖动文件到此区域进行上传,Click or drag file to this area
+            to upload
+          </p>
+          <!--          <p class="ant-upload-hint"> -->
+          <!--            Support for a single or bulk upload. Strictly prohibit from uploading company data or -->
+          <!--            other -->
+          <!--            band files -->
+          <!--          </p> -->
+        </a-upload-dragger>
+      </div>
+    </a-col>
+    <a-col :span="12">
+      <div class="split_style">
+        拆分后文件
+      </div>
+      <div class="style_right">
+        <a-upload-dragger
+          v-model:fileList="fileList"
+          name="file"
+          :multiple="true"
+          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          @change="handleChange"
+          @drop="handleDrop"
+        >
+          <p class="ant-upload-drag-icon">
+            <inbox-outlined />
+          </p>
+          <p class="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p class="ant-upload-hint">
+            Support for a single or bulk upload. Strictly prohibit from uploading company data or
+            other
+            band files
+          </p>
+        </a-upload-dragger>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<style scoped lang="less">
+.split_style {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  margin-left: 20px;
+  //margin-right: 30px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #f06;
+}
+
+.style_left {
+  width: 100%;
+  height: 100%;
+}
+
+.style_right {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pdf/turnimages/index.vue b/src/views/pdf/turnimages/index.vue
new file mode 100644
index 0000000..660eccd
--- /dev/null
+++ b/src/views/pdf/turnimages/index.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { InboxOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import type { UploadChangeParam } from 'ant-design-vue'
+
+const fileList_left = ref([])
+function handleChange_left(info: UploadChangeParam) {
+  const status = info.file.status
+  if (status !== 'uploading')
+    console.log(info.file, info.fileList)
+
+  if (status === 'done')
+    message.success(`${info.file.name} file uploaded successfully.`)
+  else if (status === 'error')
+    message.error(`${info.file.name} file upload failed.`)
+}
+
+function handleDrop_left(e: DragEvent) {
+  console.log(e)
+}
+const fileList = ref([])
+function handleChange(info: UploadChangeParam) {
+  const status = info.file.status
+  if (status !== 'uploading')
+    console.log(info.file, info.fileList)
+
+  if (status === 'done')
+    message.success(`${info.file.name} file uploaded successfully.`)
+  else if (status === 'error')
+    message.error(`${info.file.name} file upload failed.`)
+}
+
+function handleDrop(e: DragEvent) {
+  console.log(e)
+}
+</script>
+
+<template>
+  <a-row>
+    <a-col :span="12">
+      <div class="split_style">
+        拆分前文件
+      </div>
+      <div class="style_left">
+        <a-upload-dragger
+          v-model:fileList="fileList_left"
+          name="file"
+          :multiple="true"
+          action="http://localhost:85/dev-api/infra/file/upload"
+          @change="handleChange_left"
+          @drop="handleDrop_left"
+        >
+          <p class="ant-upload-drag-icon">
+            <inbox-outlined />
+          </p>
+          <p class="ant-upload-text">
+            单击或拖动文件到此区域进行上传,Click or drag file to this area to upload
+          </p>
+          <!--          <p class="ant-upload-hint"> -->
+          <!--            Support for a single or bulk upload. Strictly prohibit from uploading company data or -->
+          <!--            other -->
+          <!--            band files -->
+          <!--          </p> -->
+        </a-upload-dragger>
+      </div>
+    </a-col>
+    <a-col :span="12">
+      <div class="split_style">
+        拆分后图片
+      </div>
+      <div class="style_right">
+        <a-upload-dragger
+          v-model:fileList="fileList"
+          name="file"
+          :multiple="true"
+          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+          @change="handleChange"
+          @drop="handleDrop"
+        >
+          <p class="ant-upload-drag-icon">
+            <inbox-outlined />
+          </p>
+          <p class="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p class="ant-upload-hint">
+            Support for a single or bulk upload. Strictly prohibit from uploading company data or
+            other
+            band files
+          </p>
+        </a-upload-dragger>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<style scoped lang="less">
+.split_style {
+  margin-top: 20px;
+  margin-bottom: 10px;
+  margin-left: 20px;
+  //margin-right: 30px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #f06;
+}
+
+.style_left {
+  width: 100%;
+  height: 100%;
+}
+
+.style_right {
+  width: 100%;
+  height: 100%;
+}
+</style>