From abb1971cd5eeab76736dcf402f804098929ac7bc Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 17 三月 2026 16:59:06 +0800
Subject: [PATCH] 军泰伟业app 1.添加营销管理模块和采购管理模块并联调 2.添加协同办公模块
---
src/components/Editor/index.vue | 328 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 328 insertions(+), 0 deletions(-)
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
new file mode 100644
index 0000000..499b11a
--- /dev/null
+++ b/src/components/Editor/index.vue
@@ -0,0 +1,328 @@
+<template>
+ <view class="container">
+ <view class="editor-wrapper"
+ :style="{ height: height + 'px' }">
+ <view class='toolbar'
+ @tap="format"
+ style="height: 120px;overflow-y: auto;">
+ <view :class="formats.bold ? 'ql-active' : ''"
+ class="iconfont icon-zitijiacu"
+ data-name="bold">
+ </view>
+ <view :class="formats.italic ? 'ql-active' : ''"
+ class="iconfont icon-zitixieti"
+ data-name="italic">
+ </view>
+ <view :class="formats.underline ? 'ql-active' : ''"
+ class="iconfont icon-zitixiahuaxian"
+ data-name="underline"></view>
+ <view :class="formats.strike ? 'ql-active' : ''"
+ class="iconfont icon-zitishanchuxian"
+ data-name="strike"></view>
+ <!-- #ifndef MP-BAIDU -->
+ <view :class="formats.align === 'left' ? 'ql-active' : ''"
+ class="iconfont icon-zuoduiqi"
+ data-name="align"
+ data-value="left"></view>
+ <!-- #endif -->
+ <view :class="formats.align === 'center' ? 'ql-active' : ''"
+ class="iconfont icon-juzhongduiqi"
+ data-name="align"
+ data-value="center"></view>
+ <view :class="formats.align === 'right' ? 'ql-active' : ''"
+ class="iconfont icon-youduiqi"
+ data-name="align"
+ data-value="right"></view>
+ <view :class="formats.align === 'justify' ? 'ql-active' : ''"
+ class="iconfont icon-zuoyouduiqi"
+ data-name="align"
+ data-value="justify"></view>
+ <!-- #ifndef MP-BAIDU -->
+ <view :class="formats.lineHeight ? 'ql-active' : ''"
+ class="iconfont icon-line-height"
+ data-name="lineHeight"
+ data-value="2"></view>
+ <view :class="formats.letterSpacing ? 'ql-active' : ''"
+ class="iconfont icon-Character-Spacing"
+ data-name="letterSpacing"
+ data-value="2em"></view>
+ <view :class="formats.marginTop ? 'ql-active' : ''"
+ class="iconfont icon-722bianjiqi_duanqianju"
+ data-name="marginTop"
+ data-value="20px"></view>
+ <view :class="formats.marginBottom ? 'ql-active' : ''"
+ class="iconfont icon-723bianjiqi_duanhouju"
+ data-name="marginBottom"
+ data-value="20px"></view>
+ <!-- #endif -->
+ <view class="iconfont icon-clearedformat"
+ @tap="removeFormat"></view>
+ <!-- #ifndef MP-BAIDU -->
+ <view :class="formats.fontFamily ? 'ql-active' : ''"
+ class="iconfont icon-font"
+ data-name="fontFamily"
+ data-value="Pacifico"></view>
+ <view :class="formats.fontSize === '24px' ? 'ql-active' : ''"
+ class="iconfont icon-fontsize"
+ data-name="fontSize"
+ data-value="24px"></view>
+ <!-- #endif -->
+ <view :class="formats.color === '#0000ff' ? 'ql-active' : ''"
+ class="iconfont icon-text_color"
+ data-name="color"
+ data-value="#0000ff"></view>
+ <view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
+ class="iconfont icon-fontbgcolor"
+ data-name="backgroundColor"
+ data-value="#00ff00"></view>
+ <view class="iconfont icon-date"
+ @tap="insertDate"></view>
+ <view class="iconfont icon--checklist"
+ data-name="list"
+ data-value="check"></view>
+ <view :class="formats.list === 'ordered' ? 'ql-active' : ''"
+ class="iconfont icon-youxupailie"
+ data-name="list"
+ data-value="ordered"></view>
+ <view :class="formats.list === 'bullet' ? 'ql-active' : ''"
+ class="iconfont icon-wuxupailie"
+ data-name="list"
+ data-value="bullet"></view>
+ <view class="iconfont icon-undo"
+ @tap="undo"></view>
+ <view class="iconfont icon-redo"
+ @tap="redo"></view>
+ <view class="iconfont icon-outdent"
+ data-name="indent"
+ data-value="-1"></view>
+ <view class="iconfont icon-indent"
+ data-name="indent"
+ data-value="+1"></view>
+ <view class="iconfont icon-fengexian"
+ @tap="insertDivider"></view>
+ <view class="iconfont icon-charutupian"
+ @tap="insertImage"></view>
+ <view :class="formats.header === 1 ? 'ql-active' : ''"
+ class="iconfont icon-format-header-1"
+ data-name="header"
+ :data-value="1"></view>
+ <view :class="formats.script === 'sub' ? 'ql-active' : ''"
+ class="iconfont icon-zitixiabiao"
+ data-name="script"
+ data-value="sub"></view>
+ <view :class="formats.script === 'super' ? 'ql-active' : ''"
+ class="iconfont icon-zitishangbiao"
+ data-name="script"
+ data-value="super"></view>
+ <view class="iconfont icon-shanchu"
+ @tap="clear"></view>
+ <view :class="formats.direction === 'rtl' ? 'ql-active' : ''"
+ class="iconfont icon-direction-rtl"
+ data-name="direction"
+ data-value="rtl"></view>
+ </view>
+ <view class="content-wrapper"
+ :style="{ height: (height - 140) + 'px' }">
+ <editor id="editor"
+ class="ql-container"
+ placeholder="寮�濮嬭緭鍏�..."
+ show-img-size
+ show-img-toolbar
+ show-img-resize
+ @statuschange="onStatusChange"
+ @input="onInput"
+ :read-only="readOnly"
+ @ready="onEditorReady">
+ </editor>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ props: {
+ modelValue: {
+ type: String,
+ default: "",
+ },
+ height: {
+ type: Number,
+ default: 300,
+ },
+ readOnly: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ data() {
+ return {
+ formats: {},
+ editorCtx: null,
+ };
+ },
+ watch: {
+ modelValue: {
+ handler(newValue) {
+ if (this.editorCtx && newValue) {
+ this.editorCtx.setContents({ html: newValue });
+ }
+ },
+ immediate: true,
+ },
+ },
+ onLoad() {
+ // #ifndef MP-BAIDU
+ uni.loadFontFace({
+ family: "Pacifico",
+ source: 'url("https://sungd.github.io/Pacifico.ttf")',
+ });
+ // #endif
+ },
+ methods: {
+ onEditorReady() {
+ // #ifdef MP-BAIDU
+ this.editorCtx =
+ requireDynamicLib("editorLib").createEditorContext("editor");
+ // #endif
+
+ // #ifdef APP-PLUS || MP-WEIXIN || H5
+ uni
+ .createSelectorQuery()
+ .select("#editor")
+ .context(res => {
+ this.editorCtx = res.context;
+ // 鍒濆鍖栧唴瀹�
+ if (this.modelValue) {
+ this.editorCtx.setContents({ html: this.modelValue });
+ }
+ })
+ .exec();
+ // #endif
+ },
+ onInput() {
+ if (this.editorCtx) {
+ this.editorCtx.getContents({
+ success: res => {
+ this.$emit("update:modelValue", res.html);
+ },
+ });
+ }
+ },
+ undo() {
+ if (this.editorCtx) {
+ this.editorCtx.undo();
+ }
+ },
+ redo() {
+ if (this.editorCtx) {
+ this.editorCtx.redo();
+ }
+ },
+ format(e) {
+ if (!this.editorCtx) return;
+ let { name, value } = e.target.dataset;
+ if (!name) return;
+ this.editorCtx.format(name, value);
+ },
+ onStatusChange(e) {
+ const formats = e.detail;
+ this.formats = formats;
+ },
+ insertDivider() {
+ if (this.editorCtx) {
+ this.editorCtx.insertDivider({
+ success: function () {
+ console.log("insert divider success");
+ },
+ });
+ }
+ },
+ clear() {
+ uni.showModal({
+ title: "娓呯┖缂栬緫鍣�",
+ content: "纭畾娓呯┖缂栬緫鍣ㄥ叏閮ㄥ唴瀹癸紵",
+ success: res => {
+ if (res.confirm && this.editorCtx) {
+ this.editorCtx.clear({
+ success: function (res) {
+ console.log("clear success");
+ },
+ });
+ }
+ },
+ });
+ },
+ removeFormat() {
+ if (this.editorCtx) {
+ this.editorCtx.removeFormat();
+ }
+ },
+ insertDate() {
+ if (!this.editorCtx) return;
+ const date = new Date();
+ const formatDate = `${date.getFullYear()}/${
+ date.getMonth() + 1
+ }/${date.getDate()}`;
+ this.editorCtx.insertText({
+ text: formatDate,
+ });
+ },
+ insertImage() {
+ if (!this.editorCtx) return;
+ uni.chooseImage({
+ count: 1,
+ success: res => {
+ this.editorCtx.insertImage({
+ src: res.tempFilePaths[0],
+ alt: "鍥惧儚",
+ success: function () {
+ console.log("insert image success");
+ },
+ });
+ },
+ });
+ },
+ },
+ };
+</script>
+<style>
+ @import "./editor-icon.css";
+
+ .editor-wrapper {
+ background: #fff;
+ }
+
+ .content-wrapper {
+ background: #fff;
+ overflow: hidden;
+ }
+
+ .iconfont {
+ display: inline-block;
+ padding: 8px 8px;
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ font-size: 20px;
+ }
+
+ .toolbar {
+ box-sizing: border-box;
+ border-bottom: 0;
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+ }
+
+ .ql-container {
+ box-sizing: border-box;
+ padding: 12px 15px;
+ width: 100%;
+ height: 100%;
+ font-size: 16px;
+ line-height: 1.5;
+ }
+
+ .ql-active {
+ color: #06c;
+ }
+</style>
--
Gitblit v1.9.3