From c2e21e78d808f0ef35b9358a644d69b4ece54304 Mon Sep 17 00:00:00 2001
From: liupopo <liuzp315@tom.com>
Date: Mon, 4 Dec 2023 12:00:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E8=B4=A7=E7=82=B9=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=8F=E7=BA=AC=E5=BA=A6=EF=BC=9B=E5=95=86=E5=93=81=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=A2=9E=E5=8A=A0=E7=BC=96=E8=BE=91=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                         |   3 +-
 src/components/Editor/index.vue      | 279 ++++++++++++++++++
 src/views/commodity/commodityAdd.vue | 425 ++++++++++++++-------------
 src/views/pickupPoint/indexAdd.vue   |  10 +-
 4 files changed, 503 insertions(+), 214 deletions(-)
 create mode 100644 src/components/Editor/index.vue

diff --git a/package.json b/package.json
index b49e755..2ed9be7 100644
--- a/package.json
+++ b/package.json
@@ -14,10 +14,10 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
-    "echarts": "^5.4.3",
     "axios": "^0.24.0",
     "bpmn-js": "^9.2.2",
     "core-js": "^3.8.3",
+    "echarts": "^5.4.3",
     "ejs": "^2.7.4",
     "element-ui": "^2.15.14",
     "js-cookie": "2.2.0",
@@ -27,6 +27,7 @@
     "path-to-regexp": "2.4.0",
     "portfinder": "^1.0.21",
     "qs": "^6.9.4",
+    "quill": "^1.3.7",
     "sass-resources-loader": "^2.1.1",
     "viewerjs": "^1.9.0",
     "vue": "^2.6.14",
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
new file mode 100644
index 0000000..332c134
--- /dev/null
+++ b/src/components/Editor/index.vue
@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <el-upload
+      :action="uploadUrl"
+      :before-upload="handleBeforeUpload"
+      :on-success="handleUploadSuccess"
+      :on-error="handleUploadError"
+      name="file"
+      :show-file-list="false"
+      :headers="headers"
+      style="display: none"
+      ref="upload"
+      v-if="this.type == 'url'"
+    >
+    </el-upload>
+    <div class="editor" ref="editor" :style="styles"></div>
+  </div>
+</template>
+
+<script>
+import Quill from "quill";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "Editor",
+  props: {
+    /* 编辑器的内容 */
+    value: {
+      type: String,
+      default: "",
+    },
+    /* 高度 */
+    height: {
+      type: Number,
+      default: null,
+    },
+    /* 最小高度 */
+    minHeight: {
+      type: Number,
+      default: null,
+    },
+    /* 只读 */
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    // 上传文件大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    /* 类型（base64格式、url格式） */
+    type: {
+      type: String,
+      default: "url",
+    }
+  },
+  data() {
+    return {
+      uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken()
+      },
+      Quill: null,
+      currentValue: "",
+      options: {
+        theme: "snow",
+        bounds: document.body,
+        debug: "warn",
+        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"]                       // 链接、图片、视频
+          ],
+        },
+        placeholder: "请输入内容",
+        readOnly: this.readOnly,
+      },
+    };
+  },
+  computed: {
+    styles() {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val !== this.currentValue) {
+          this.currentValue = val === null ? "" : val;
+          if (this.Quill) {
+            this.Quill.pasteHTML(this.currentValue);
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  beforeDestroy() {
+    this.Quill = null;
+  },
+  methods: {
+    init() {
+      const editor = this.$refs.editor;
+      this.Quill = new Quill(editor, this.options);
+      // 如果设置了上传地址则自定义图片上传事件
+      if (this.type == 'url') {
+        let toolbar = this.Quill.getModule("toolbar");
+        toolbar.addHandler("image", (value) => {
+          this.uploadType = "image";
+          if (value) {
+            this.$refs.upload.$children[0].$refs.input.click();
+          } else {
+            this.quill.format("image", false);
+          }
+        });
+      }
+      this.Quill.pasteHTML(this.currentValue);
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML;
+        const text = this.Quill.getText();
+        const quill = this.Quill;
+        this.currentValue = html;
+        this.$emit("input", html);
+        this.$emit("on-change", { html, text, quill });
+      });
+      this.Quill.on("text-change", (delta, oldDelta, source) => {
+        this.$emit("on-text-change", delta, oldDelta, source);
+      });
+      this.Quill.on("selection-change", (range, oldRange, source) => {
+        this.$emit("on-selection-change", range, oldRange, source);
+      });
+      this.Quill.on("editor-change", (eventName, ...args) => {
+        this.$emit("on-editor-change", eventName, ...args);
+      });
+    },
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      return true;
+    },
+    handleUploadSuccess(res, file) {
+      // 获取富文本组件实例
+      let quill = this.Quill;
+      // 如果上传成功
+      // if (res.code == 200) {
+      //   // 获取光标所在位置
+      //   let length = quill.getSelection().index;
+      //   // 插入图片  res.url为服务器返回的图片地址
+      //   quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
+      //   // 调整光标到最后
+      //   quill.setSelection(length + 1);
+      if (res.code == "200") {
+        // 获取光标所在位置
+        let length = quill.getSelection().index;
+        // 插入图片  res.url为服务器返回的图片地址
+        quill.insertEmbed(length, "image", res.data.fullUrl);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+      } else {
+        this.$message.error("图片插入失败");
+      }
+    },
+    handleUploadError() {
+      this.$message.error("图片插入失败");
+    },
+  },
+};
+</script>
+
+<style>
+.editor, .ql-toolbar {
+  white-space: pre-wrap !important;
+  line-height: normal !important;
+}
+.quill-img {
+  display: none;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+  content: "请输入链接地址:";
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: "保存";
+  padding-right: 0px;
+}
+
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+  content: "请输入视频地址:";
+}
+
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "14px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+  content: "10px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+  content: "18px";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+  content: "32px";
+}
+
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: "文本";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: "标题1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: "标题2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: "标题3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: "标题4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: "标题5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: "标题6";
+}
+
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "标准字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+  content: "衬线字体";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+  content: "等宽字体";
+}
+</style>
diff --git a/src/views/commodity/commodityAdd.vue b/src/views/commodity/commodityAdd.vue
index a7747be..25ed66a 100644
--- a/src/views/commodity/commodityAdd.vue
+++ b/src/views/commodity/commodityAdd.vue
@@ -1,217 +1,220 @@
 <template>
-	<div>
-
-		<div class="tab-header webtop">
-			<!-- 标题 -->
-			<div>商品信息</div>
-			<!-- start 添加修改按钮 -->
-			<div>
-				<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
-				<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
-			</div>
-			<!-- end 添加修改按钮 -->
-			<!-- end 详情按钮 -->
-		</div>
-
-		<div class="listconadd">
-
-			<el-card class="box-card">
-				<div class="item">
-					<span class="item_text">名称：</span>
-					<el-input v-model="formobj.name" placeholder="" class="item_input" clearable />
-				</div>
-				<div class="item">
-					<span class="item_text">编码：</span>
-					<el-input v-model="formobj.code" placeholder="" class="item_input" clearable
-						oninput="value=value.replace(/[^A-Za-z0-9]/g, '')" />
-				</div>
-				<div class="item">
-					<span class="item_text">条码：</span>
-					<el-input v-model="formobj.barcode" placeholder="" class="item_input" clearable
-						oninput="value=value.replace(/[^0-9]/g,'')" />
-				</div>
-				<div class="item">
-					<span class="item_text">价格：</span>
-					<el-input v-model="formobj.price" placeholder="" class="item_input" clearable
-						oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />
-				</div>
-				<div class="item">
-					<span class="item_text">单位：</span>
-					<el-input v-model="formobj.unitName" placeholder="" class="item_input" clearable />
-				</div>
-				<div class="item">
-					<span class="item_text">备注：</span>
-					<el-input v-model="formobj.remarks" placeholder="例如：一份30斤" class="item_input" clearable />
-				</div>
-
-				<div class="item" style="margin-bottom: 100px;margin-top: 100px;">
-					<span class="item_text">图片：</span>
-					<upload style="margin-top: 20px;" class="item_input" ref="uploadImg2" v-model="imgList" :limit="1"
-						@change="backData" bucket="map" :upload-data="{ type: '0001' }"></upload>
-				</div>
-
-			</el-card>
-
-		</div>
-
-	</div>
+  <div>
+
+    <div class="tab-header webtop">
+      <!-- 标题 -->
+      <div>商品信息</div>
+      <!-- start 添加修改按钮 -->
+      <div>
+        <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!-- end 添加修改按钮 -->
+      <!-- end 详情按钮 -->
+    </div>
+
+    <div class="listconadd">
+
+      <el-card class="box-card">
+        <div class="item">
+          <span class="item_text">名称：</span>
+          <el-input v-model="formobj.name" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">编码：</span>
+          <el-input v-model="formobj.code" placeholder="" class="item_input" clearable oninput="value=value.replace(/[^A-Za-z0-9]/g, '')" />
+        </div>
+        <div class="item">
+          <span class="item_text">条码：</span>
+          <el-input v-model="formobj.barcode" placeholder="" class="item_input" clearable oninput="value=value.replace(/[^0-9]/g,'')" />
+        </div>
+        <div class="item">
+          <span class="item_text">价格：</span>
+          <el-input v-model="formobj.price" placeholder="" class="item_input" clearable
+            oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />
+        </div>
+        <div class="item">
+          <span class="item_text">单位：</span>
+          <el-input v-model="formobj.unitName" placeholder="" class="item_input" clearable />
+        </div>
+        <div class="item">
+          <span class="item_text">备注：</span>
+          <el-input v-model="formobj.remarks" placeholder="例如：一份30斤" class="item_input" clearable />
+        </div>
+
+        <div>
+          <span class="item_text">商品详情：</span>
+          <editor :height="300" :minHeight="100" :value="formobj.appContent" @input="editinput"></editor>
+        </div>
+
+      </el-card>
+
+    </div>
+
+  </div>
 </template>
 
 <script>
-	import req from '@/api/commodity/commodity.js'
-	import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'
-
-	export default {
-		components: {
-			upload
-		},
-		data() {
-			return {
-				imgList: [
-
-
-				],
-				submitdisabled: false,
-				formobj: {
-					sid: "",
-					name: '',
-					code: '',
-					barcode: '',
-					price: "",
-					unitName: "",
-					remarks:"",
-					picUrl: ""
-				}
-			}
-		},
-		methods: {
-			backData(value) {
-				console.log("backData》》》》", value)
-				console.log("imgList", this.imgList)
-
-
-				this.formobj.picUrl = this.imgList[0].url
-			},
-
-			saveOrUpdate() {
-				console.log('>>>>>>>>>saveOrUpdate', this.formobj)
-				req.saveGoods(this.formobj)
-					.then(resp => {
-						if (resp.success) {
-							this.$message({
-								showClose: true,
-								type: 'success',
-								message: resp.msg
-							})
-							this.handleReturn('true')
-						} else {
-							// 根据resp.code进行异常情况处理
-						}
-					})
-					.catch(() => {})
-			},
-			handleReturn(isreload) {
-				if (isreload === 'true') this.$emit('reloadlist')
-				this.imgList = []
-				this.formobj = {
-					sid: "",
-					name: '',
-					code: '',
-					barcode: '',
-					price: "",
-					unitName: "",
-					remarks:"",
-					picUrl: ""
-				}
-				this.$emit('doback')
-			},
-
-			showAdd() {
-				console.log(this.imgList, 88888888)
-			},
-			showEdit(row) {
-				req.goodsInit(row.sid)
-					.then(resp => {
-						if (resp.success) {
-							this.formobj = resp.data
-							this.imgList = []
-							this.imgList.push({
-								url: resp.data.picUrl
-							})
-
-						}
-					})
-					.catch(e => {
-						this.formobj = row
-						this.imgList = []
-						this.imgList.push({
-							url: formobj.picUrl
-						})
-					})
-			}
-		}
-	}
+  import req from '@/api/commodity/commodity.js'
+  import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'
+  import Editor from '@/components/Editor'
+
+  export default {
+    components: {
+      upload,
+      Editor
+    },
+    data() {
+      return {
+        imgList: [
+
+
+        ],
+        submitdisabled: false,
+        formobj: {
+          sid: "",
+          name: '',
+          code: '',
+          barcode: '',
+          price: "",
+          unitName: "",
+          remarks: "",
+          picUrl: "",
+          appContent:''
+        }
+      }
+    },
+    methods: {
+      backData(value) {
+        console.log("backData》》》》", value)
+        console.log("imgList", this.imgList)
+
+
+        this.formobj.picUrl = this.imgList[0].url
+      },
+
+      saveOrUpdate() {
+        console.log('>>>>>>>>>saveOrUpdate', this.formobj)
+        req.saveGoods(this.formobj)
+          .then(resp => {
+            if (resp.success) {
+              this.$message({
+                showClose: true,
+                type: 'success',
+                message: resp.msg
+              })
+              this.handleReturn('true')
+            } else {
+              // 根据resp.code进行异常情况处理
+            }
+          })
+          .catch(() => {})
+      },
+      handleReturn(isreload) {
+        if (isreload === 'true') this.$emit('reloadlist')
+        this.imgList = []
+        this.formobj = {
+          sid: "",
+          name: '',
+          code: '',
+          barcode: '',
+          price: "",
+          unitName: "",
+          remarks: "",
+          picUrl: ""
+        }
+        this.$emit('doback')
+      },
+
+      showAdd() {
+        console.log(this.imgList, 88888888)
+      },
+      showEdit(row) {
+        req.goodsInit(row.sid)
+          .then(resp => {
+            if (resp.success) {
+              this.formobj = resp.data
+              this.imgList = []
+              this.imgList.push({
+                url: resp.data.picUrl
+              })
+
+            }
+          })
+          .catch(e => {
+            this.formobj = row
+            this.imgList = []
+            this.imgList.push({
+              url: formobj.picUrl
+            })
+          })
+      },
+      editinput(text) {
+        this.formobj.appContent = text
+      }
+    }
+  }
 </script>
 <style lang="scss">
-	.box-card {
-		margin-left: 60px;
-		margin-right: 60px;
-		min-width: 70%;
-		margin-top: 20px;
-
-		.item {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			margin-top: 15px;
-			height: 40px;
-			line-height: 40px;
-
-			.item_text {
-				flex: 0.8;
-				font-size: 18px;
-				text-align: right;
-			}
-
-			.item_input {
-				flex: 4;
-				font-size: 16px;
-				margin-left: 10px;
-				margin-right: 80px;
-			}
-
-			.item_left_input {
-				width: 20%;
-			}
-
-			.item_left_text {
-				height: 30px;
-				margin-left: 20px;
-				line-height: 30px;
-				color: #018AD2;
-				padding: 0px 15px;
-				border: 1.5px solid #018AD2;
-				border-radius: 5px;
-
-			}
-
-			.item_right {
-				flex: 1;
-				justify-items: center;
-
-				.item_right_list_text {
-					font-size: 16px;
-				}
-
-				.item_right_list_delect {
-					color: #5E94FF;
-					margin-left: 20px;
-					font-size: 16px;
-					text-decoration: underline;
-				}
-			}
-
-		}
-
-	}
-</style>
\ No newline at end of file
+  .box-card {
+    margin-left: 60px;
+    margin-right: 60px;
+    min-width: 70%;
+    margin-top: 20px;
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 15px;
+      height: 40px;
+      line-height: 40px;
+
+      .item_text {
+        flex: 0.8;
+        font-size: 18px;
+        text-align: right;
+      }
+
+      .item_input {
+        flex: 4;
+        font-size: 16px;
+        margin-left: 10px;
+        margin-right: 80px;
+      }
+
+      .item_left_input {
+        width: 20%;
+      }
+
+      .item_left_text {
+        height: 30px;
+        margin-left: 20px;
+        line-height: 30px;
+        color: #018AD2;
+        padding: 0px 15px;
+        border: 1.5px solid #018AD2;
+        border-radius: 5px;
+
+      }
+
+      .item_right {
+        flex: 1;
+        justify-items: center;
+
+        .item_right_list_text {
+          font-size: 16px;
+        }
+
+        .item_right_list_delect {
+          color: #5E94FF;
+          margin-left: 20px;
+          font-size: 16px;
+          text-decoration: underline;
+        }
+      }
+
+    }
+
+  }
+</style>
diff --git a/src/views/pickupPoint/indexAdd.vue b/src/views/pickupPoint/indexAdd.vue
index d74b3d1..64bb7f1 100644
--- a/src/views/pickupPoint/indexAdd.vue
+++ b/src/views/pickupPoint/indexAdd.vue
@@ -40,6 +40,10 @@
           <span class="item_text">排序：</span>
           <el-input v-model="formobj.sort" placeholder="" class="item_input" clearable />
         </div>
+        <div class="item">
+          <span class="item_text">经纬度：</span>
+          <el-input v-model="formobj.lonAndLat" placeholder="经纬度,以逗号分隔" class="item_input" clearable />
+        </div>
 
       </el-card>
 
@@ -63,7 +67,8 @@
 					businessHours: '',
 					sort: 0,
 					linker: '',
-					picUrl: ''
+					picUrl: '',
+					lonAndLat: ''
 				}
 			}
 		},
@@ -97,7 +102,8 @@
 					businessHours: '',
 					sort: 0,
 					linker: '',
-					picUrl: ''
+					picUrl: '',
+					lonAndLat: ''
 				}
 				this.$emit('doback')
 			},