yxt_product
/
yxt-yyth-ui-admin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
liupopo 2 years ago
parent
e1e044f791
commit
c2e21e78d8
4 changed files with 503 additions and 214 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      package.json
  2. 279
      src/components/Editor/index.vue
  3. 425
      src/views/commodity/commodityAdd.vue
  4. 10
      src/views/pickupPoint/indexAdd.vue

3
package.json
View File

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

279
src/components/Editor/index.vue
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>

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

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

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

@ -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')
},

Write Preview
Loading…
Cancel
Save