product_platform/yxt-yyth-ui-admin
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

提货点增加经纬度；商品详情增加编辑内容

Browse Source
This commit is contained in:
liupopo
2023-12-04 12:00:45 +08:00
parent e1e044f791
commit c2e21e78d8
4 changed files with 477 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@@ -14,10 +14,10 @@
"test:ci": "npm run lint && npm run test:unit" "test:ci": "npm run lint && npm run test:unit"
}, },
"dependencies": { "dependencies": {
"echarts": "^5.4.3",
"axios": "^0.24.0", "axios": "^0.24.0",
"bpmn-js": "^9.2.2", "bpmn-js": "^9.2.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"echarts": "^5.4.3",
"ejs": "^2.7.4", "ejs": "^2.7.4",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
@@ -27,6 +27,7 @@
"path-to-regexp": "2.4.0", "path-to-regexp": "2.4.0",
"portfinder": "^1.0.21", "portfinder": "^1.0.21",
"qs": "^6.9.4", "qs": "^6.9.4",
"quill": "^1.3.7",
"sass-resources-loader": "^2.1.1", "sass-resources-loader": "^2.1.1",
"viewerjs": "^1.9.0", "viewerjs": "^1.9.0",
"vue": "^2.6.14", "vue": "^2.6.14",

279
src/components/Editor/index.vue Normal file
View File

@@ -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>

373
src/views/commodity/commodityAdd.vue
View File

@@ -1,217 +1,220 @@
<template> <template>
<div> <div>
<div class="tab-header webtop"> <div class="tab-header webtop">
<!-- 标题 --> <!-- 标题 -->
<div>商品信息</div> <div>商品信息</div>
<!-- start 添加修改按钮 --> <!-- start 添加修改按钮 -->
<div> <div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> <el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div> </div>
<!-- end 添加修改按钮 --> <!-- end 添加修改按钮 -->
<!-- end 详情按钮 --> <!-- end 详情按钮 -->
</div> </div>
<div class="listconadd"> <div class="listconadd">
<el-card class="box-card"> <el-card class="box-card">
<div class="item"> <div class="item">
<span class="item_text">名称：</span> <span class="item_text">名称：</span>
<el-input v-model="formobj.name" placeholder="" class="item_input" clearable /> <el-input v-model="formobj.name" placeholder="" class="item_input" clearable />
</div> </div>
<div class="item"> <div class="item">
<span class="item_text">编码：</span> <span class="item_text">编码：</span>
<el-input v-model="formobj.code" placeholder="" class="item_input" clearable <el-input v-model="formobj.code" placeholder="" class="item_input" clearable oninput="value=value.replace(/[^A-Za-z0-9]/g, '')" />
oninput="value=value.replace(/[^A-Za-z0-9]/g, '')" /> </div>
</div> <div class="item">
<div class="item"> <span class="item_text">条码：</span>
<span class="item_text">条码：</span> <el-input v-model="formobj.barcode" placeholder="" class="item_input" clearable oninput="value=value.replace(/[^0-9]/g,'')" />
<el-input v-model="formobj.barcode" placeholder="" class="item_input" clearable </div>
oninput="value=value.replace(/[^0-9]/g,'')" /> <div class="item">
</div> <span class="item_text">价格：</span>
<div class="item"> <el-input v-model="formobj.price" placeholder="" class="item_input" clearable
<span class="item_text">价格：</span> oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />
<el-input v-model="formobj.price" placeholder="" class="item_input" clearable </div>
oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" /> <div class="item">
</div> <span class="item_text">单位：</span>
<div class="item"> <el-input v-model="formobj.unitName" placeholder="" class="item_input" clearable />
<span class="item_text">单位：</span> </div>
<el-input v-model="formobj.unitName" placeholder="" class="item_input" clearable /> <div class="item">
</div> <span class="item_text">备注：</span>
<div class="item"> <el-input v-model="formobj.remarks" placeholder="例如：一份30斤" class="item_input" clearable />
<span class="item_text">备注：</span> </div>
<el-input v-model="formobj.remarks" placeholder="例如：一份30斤" class="item_input" clearable />
</div>
<div class="item" style="margin-bottom: 100px;margin-top: 100px;"> <div>
<span class="item_text">图片：</span> <span class="item_text">商品详情：</span>
<upload style="margin-top: 20px;" class="item_input" ref="uploadImg2" v-model="imgList" :limit="1" <editor :height="300" :minHeight="100" :value="formobj.appContent" @input="editinput"></editor>
@change="backData" bucket="map" :upload-data="{ type: '0001' }"></upload> </div>
</div>
</el-card> </el-card>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import req from '@/api/commodity/commodity.js' import req from '@/api/commodity/commodity.js'
import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue' import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'
import Editor from '@/components/Editor'
export default { export default {
components: { components: {
upload upload,
}, Editor
data() { },
return { data() {
imgList: [ return {
imgList: [
], ],
submitdisabled: false, submitdisabled: false,
formobj: { formobj: {
sid: "", sid: "",
name: '', name: '',
code: '', code: '',
barcode: '', barcode: '',
price: "", price: "",
unitName: "", unitName: "",
remarks:"", remarks: "",
picUrl: "" picUrl: "",
} appContent:''
} }
}, }
methods: { },
backData(value) { methods: {
console.log("backData》》》》", value) backData(value) {
console.log("imgList", this.imgList) console.log("backData》》》》", value)
console.log("imgList", this.imgList)
this.formobj.picUrl = this.imgList[0].url this.formobj.picUrl = this.imgList[0].url
}, },
saveOrUpdate() { saveOrUpdate() {
console.log('>>>>>>>>>saveOrUpdate', this.formobj) console.log('>>>>>>>>>saveOrUpdate', this.formobj)
req.saveGoods(this.formobj) req.saveGoods(this.formobj)
.then(resp => { .then(resp => {
if (resp.success) { if (resp.success) {
this.$message({ this.$message({
showClose: true, showClose: true,
type: 'success', type: 'success',
message: resp.msg message: resp.msg
}) })
this.handleReturn('true') this.handleReturn('true')
} else { } else {
// 根据resp.code进行异常情况处理 // 根据resp.code进行异常情况处理
} }
}) })
.catch(() => {}) .catch(() => {})
}, },
handleReturn(isreload) { handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist') if (isreload === 'true') this.$emit('reloadlist')
this.imgList = [] this.imgList = []
this.formobj = { this.formobj = {
sid: "", sid: "",
name: '', name: '',
code: '', code: '',
barcode: '', barcode: '',
price: "", price: "",
unitName: "", unitName: "",
remarks:"", remarks: "",
picUrl: "" picUrl: ""
} }
this.$emit('doback') this.$emit('doback')
}, },
showAdd() { showAdd() {
console.log(this.imgList, 88888888) console.log(this.imgList, 88888888)
}, },
showEdit(row) { showEdit(row) {
req.goodsInit(row.sid) req.goodsInit(row.sid)
.then(resp => { .then(resp => {
if (resp.success) { if (resp.success) {
this.formobj = resp.data this.formobj = resp.data
this.imgList = [] this.imgList = []
this.imgList.push({ this.imgList.push({
url: resp.data.picUrl url: resp.data.picUrl
}) })
} }
}) })
.catch(e => { .catch(e => {
this.formobj = row this.formobj = row
this.imgList = [] this.imgList = []
this.imgList.push({ this.imgList.push({
url: formobj.picUrl url: formobj.picUrl
}) })
}) })
} },
} editinput(text) {
} this.formobj.appContent = text
}
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.box-card { .box-card {
margin-left: 60px; margin-left: 60px;
margin-right: 60px; margin-right: 60px;
min-width: 70%; min-width: 70%;
margin-top: 20px; margin-top: 20px;
.item { .item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-top: 15px; margin-top: 15px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
.item_text { .item_text {
flex: 0.8; flex: 0.8;
font-size: 18px; font-size: 18px;
text-align: right; text-align: right;
} }
.item_input { .item_input {
flex: 4; flex: 4;
font-size: 16px; font-size: 16px;
margin-left: 10px; margin-left: 10px;
margin-right: 80px; margin-right: 80px;
} }
.item_left_input { .item_left_input {
width: 20%; width: 20%;
} }
.item_left_text { .item_left_text {
height: 30px; height: 30px;
margin-left: 20px; margin-left: 20px;
line-height: 30px; line-height: 30px;
color: #018AD2; color: #018AD2;
padding: 0px 15px; padding: 0px 15px;
border: 1.5px solid #018AD2; border: 1.5px solid #018AD2;
border-radius: 5px; border-radius: 5px;
} }
.item_right { .item_right {
flex: 1; flex: 1;
justify-items: center; justify-items: center;
.item_right_list_text { .item_right_list_text {
font-size: 16px; font-size: 16px;
} }
.item_right_list_delect { .item_right_list_delect {
color: #5E94FF; color: #5E94FF;
margin-left: 20px; margin-left: 20px;
font-size: 16px; font-size: 16px;
text-decoration: underline; text-decoration: underline;
} }
} }
} }
} }
</style> </style>

10
src/views/pickupPoint/indexAdd.vue
View File

@@ -40,6 +40,10 @@
<span class="item_text">排序：</span> <span class="item_text">排序：</span>
<el-input v-model="formobj.sort" placeholder="" class="item_input" clearable /> <el-input v-model="formobj.sort" placeholder="" class="item_input" clearable />
</div> </div>
<div class="item">
<span class="item_text">经纬度：</span>
<el-input v-model="formobj.lonAndLat" placeholder="经纬度,以逗号分隔" class="item_input" clearable />
</div>
</el-card> </el-card>
@@ -63,7 +67,8 @@
businessHours: '', businessHours: '',
sort: 0, sort: 0,
linker: '', linker: '',
picUrl: '' picUrl: '',
lonAndLat: ''
} }
} }
}, },
@@ -97,7 +102,8 @@
businessHours: '', businessHours: '',
sort: 0, sort: 0,
linker: '', linker: '',
picUrl: '' picUrl: '',
lonAndLat: ''
} }
this.$emit('doback') this.$emit('doback')
}, },