From 1c0f01cc462d37e146c34127d2883ca51e26d508 Mon Sep 17 00:00:00 2001
From: 曹睿 <360930172@qq.com>
Date: 星期二, 24 六月 2025 17:12:32 +0800
Subject: [PATCH] fix: 修复PIMTable不支持懒加载问题。修复【来票登记】金额格式化显示NaN问题。 style: 重构来票登记页面。 feat: 完善文件上传组件功能。【来票台账】底部添加合计。【来票登记】添加上传附件
---
src/components/Editor/index.vue | 152 ++++++++++++++++++++++++++++----------------------
1 files changed, 84 insertions(+), 68 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index efd0edc..c283e42 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -27,18 +27,18 @@
</template>
<script setup>
-import axios from 'axios'
-import { QuillEditor } from "@vueup/vue-quill"
-import "@vueup/vue-quill/dist/vue-quill.snow.css"
-import { getToken } from "@/utils/auth"
+import axios from "axios";
+import { QuillEditor } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { getToken } from "@/utils/auth";
-const { proxy } = getCurrentInstance()
+const { proxy } = getCurrentInstance();
-const quillEditorRef = ref()
-const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload") // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
+const quillEditorRef = ref();
+const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃
const headers = ref({
- Authorization: "Bearer " + getToken()
-})
+ Authorization: "Bearer " + getToken(),
+});
const props = defineProps({
/* 缂栬緫鍣ㄧ殑鍐呭 */
@@ -69,8 +69,8 @@
type: {
type: String,
default: "url",
- }
-})
+ },
+});
const options = ref({
theme: "snow",
@@ -79,74 +79,78 @@
modules: {
// 宸ュ叿鏍忛厤缃�
toolbar: [
- ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
- ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
- [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛�
- [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
- [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
- [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
- [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
- [{ align: [] }], // 瀵归綈鏂瑰紡
- ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
- ["link", "image", "video"] // 閾炬帴銆佸浘鐗囥�佽棰�
+ ["bold", "italic", "underline", "strike"], // 鍔犵矖 鏂滀綋 涓嬪垝绾� 鍒犻櫎绾�
+ ["blockquote", "code-block"], // 寮曠敤 浠ｇ爜鍧�
+ [{ list: "ordered" }, { list: "bullet" }], // 鏈夊簭銆佹棤搴忓垪琛�
+ [{ indent: "-1" }, { indent: "+1" }], // 缂╄繘
+ [{ size: ["small", false, "large", "huge"] }], // 瀛椾綋澶у皬
+ [{ header: [1, 2, 3, 4, 5, 6, false] }], // 鏍囬
+ [{ color: [] }, { background: [] }], // 瀛椾綋棰滆壊銆佸瓧浣撹儗鏅鑹�
+ [{ align: [] }], // 瀵归綈鏂瑰紡
+ ["clean"], // 娓呴櫎鏂囨湰鏍煎紡
+ ["link", "image", "video"], // 閾炬帴銆佸浘鐗囥�佽棰�
],
},
placeholder: "璇疯緭鍏ュ唴瀹�",
- readOnly: props.readOnly
-})
+ readOnly: props.readOnly,
+});
const styles = computed(() => {
- let style = {}
+ let style = {};
if (props.minHeight) {
- style.minHeight = `${props.minHeight}px`
+ style.minHeight = `${props.minHeight}px`;
}
if (props.height) {
- style.height = `${props.height}px`
+ style.height = `${props.height}px`;
}
- return style
-})
+ return style;
+});
-const content = ref("")
-watch(() => props.modelValue, (v) => {
- if (v !== content.value) {
- content.value = v == undefined ? "<p></p>" : v
- }
-}, { immediate: true })
+const content = ref("");
+watch(
+ () => props.modelValue,
+ (v) => {
+ if (v !== content.value) {
+ content.value = v == undefined ? "<p></p>" : v;
+ }
+ },
+ { immediate: true }
+);
// 濡傛灉璁剧疆浜嗕笂浼犲湴鍧�鍒欒嚜瀹氫箟鍥剧墖涓婁紶浜嬩欢
onMounted(() => {
- if (props.type == 'url') {
- let quill = quillEditorRef.value.getQuill()
- let toolbar = quill.getModule("toolbar")
+ if (props.type == "url") {
+ let quill = quillEditorRef.value.getQuill();
+ let toolbar = quill.getModule("toolbar");
toolbar.addHandler("image", (value) => {
if (value) {
- proxy.$refs.uploadRef.click()
+ proxy.$refs.uploadRef.click();
} else {
- quill.format("image", false)
+ quill.format("image", false);
}
- })
- quill.root.addEventListener('paste', handlePasteCapture, true)
+ });
+ quill.root.addEventListener("paste", handlePasteCapture, true);
}
-})
+});
// 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏�
function handleBeforeUpload(file) {
- const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"]
- const isJPG = type.includes(file.type)
+ const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
+ const isJPG = type.includes(file.type);
//妫�楠屾枃浠舵牸寮�
if (!isJPG) {
- proxy.$modal.msgError(`鍥剧墖鏍煎紡閿欒!`)
- return false
+ proxy.$modal.msgError(`鍥剧墖鏍煎紡閿欒!`);
+ return false;
}
// 鏍℃鏂囦欢澶у皬
if (props.fileSize) {
- const isLt = file.size / 1024 / 1024 < props.fileSize
+ const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
- proxy.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`)
- return false
+ proxy.$modal.msgError(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${props.fileSize} MB!`);
+ return false;
}
}
- return true
+ return true;
}
// 涓婁紶鎴愬姛澶勭悊
@@ -154,44 +158,55 @@
// 濡傛灉涓婁紶鎴愬姛
if (res.code == 200) {
// 鑾峰彇瀵屾枃鏈疄渚�
- let quill = toRaw(quillEditorRef.value).getQuill()
+ let quill = toRaw(quillEditorRef.value).getQuill();
// 鑾峰彇鍏夋爣浣嶇疆
- let length = quill.selection.savedRange.index
+ let length = quill.selection.savedRange.index;
// 鎻掑叆鍥剧墖锛宺es.url涓烘湇鍔″櫒杩斿洖鐨勫浘鐗囬摼鎺ュ湴鍧�
- quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName)
+ quill.insertEmbed(
+ length,
+ "image",
+ import.meta.env.VITE_APP_BASE_API + res.fileName
+ );
// 璋冩暣鍏夋爣鍒版渶鍚�
- quill.setSelection(length + 1)
+ quill.setSelection(length + 1);
} else {
- proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触")
+ proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触");
}
}
// 涓婁紶澶辫触澶勭悊
function handleUploadError() {
- proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触")
+ proxy.$modal.msgError("鍥剧墖鎻掑叆澶辫触");
}
// 澶嶅埗绮樿创鍥剧墖澶勭悊
function handlePasteCapture(e) {
- const clipboard = e.clipboardData || window.clipboardData
+ const clipboard = e.clipboardData || window.clipboardData;
if (clipboard && clipboard.items) {
for (let i = 0; i < clipboard.items.length; i++) {
- const item = clipboard.items[i]
- if (item.type.indexOf('image') !== -1) {
- e.preventDefault()
- const file = item.getAsFile()
- insertImage(file)
+ const item = clipboard.items[i];
+ if (item.type.indexOf("image") !== -1) {
+ e.preventDefault();
+ const file = item.getAsFile();
+ insertImage(file);
}
}
}
}
function insertImage(file) {
- const formData = new FormData()
- formData.append("file", file)
- axios.post(uploadUrl.value, formData, { headers: { "Content-Type": "multipart/form-data", Authorization: headers.value.Authorization } }).then(res => {
- handleUploadSuccess(res.data)
- })
+ const formData = new FormData();
+ formData.append("file", file);
+ axios
+ .post(uploadUrl.value, formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ Authorization: headers.value.Authorization,
+ },
+ })
+ .then((res) => {
+ handleUploadSuccess(res.data);
+ });
}
</script>
@@ -199,7 +214,8 @@
.editor-img-uploader {
display: none;
}
-.editor, .ql-toolbar {
+.editor,
+.ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
--
Gitblit v1.9.3