Maylin/goods_label_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模板修改重置和保存功能

Browse Source
This commit is contained in:
Maylin
2022-10-11 17:55:58 +08:00
parent 57d101b8c6
commit f863413792
7 changed files with 277 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -19,6 +19,7 @@
"@vueuse/core": "8.5.0",
"axios": "0.26.1",
"echarts": "5.3.2",
"element-china-area-data": "^5.0.2",
"element-plus": "2.2.15",
"file-saver": "2.0.5",
"fuse.js": "6.5.3",

8
src/components/DrawCanvas/index.vue
View File

@ -156,17 +156,13 @@ watchEffect(() => {
blocks.forEach(block => {
if (block.type === 'image') {
const image = new Image()
block.image = image
image.src = block.src
image.onload = () => {
block.image = image
}
}else if (block.type === 'qrcode'){
QRCode.toDataURL(block.text, {width: block.width, height: block.height}).then(src=> {
const image = new Image()
block.image = image
image.src = src
image.onload = () => {
block.image = image
}
})
}
})

27
src/components/DrawToolbar/index.vue
View File

@ -42,15 +42,21 @@
<el-divider>内容</el-divider>
<div class="mt10"></div>
<div class="mt5" v-for="(item, key) in content.blocks" :key="key">
<el-alert :type="selectBlock === item?'success': 'info'" effect="dark"
@click="handleBlockSelect(item)"
@close.stop="handleBlockDelete(key, item)">
<template #title>
[ {{ blockTypes[item.type] }} ] {{ item.name }}
</template>
</el-alert>
<div class="mt5" v-for="(item,key) in content.blocks" :key="key">
<!-- <el-alert :type="selectBlock === item?'success': 'info'" effect="dark"-->
<!-- @click="handleBlockSelect(item)"-->
<!-- @close.stop="handleBlockDelete(key, item)" >-->
<!-- <template #title>-->
<!-- [ {{ blockTypes[item.type] }} ] {{ item.name }}-->
<!-- </template>-->
<!-- </el-alert>-->
<div style="height:30px;padding:5px 8px;background-color: #909399;border-radius: 4px;color: #FFFFFF;
display: flex;
justify-content: space-between;
line-height: 18px;">
<a style="color: #FFFFFF;width: 80%" @click="handleBlockSelect(item)" >[ {{ blockTypes[item.type] }} ] {{ item.name }}</a>
<Close style="width: 0.8em; height: 0.8em; " @click="handleBlockDelete(key, item)"/>
</div>
</div>
</template>
@ -104,8 +110,9 @@ function handleBlockSelect(item) {
}
function handleBlockDelete(key, item) {
emit('update:select-block', null)
console.log(3333)
content.value.blocks.splice(key, 1)
emit('update:select-block', null)
}
/**

287
src/views/shop/goodsInfo/index.vue
View File

@ -114,54 +114,105 @@
/>
<!-- 添加或修改商品信息对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="goodsInfoRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="编码" prop="goodsNo">
<el-input v-model="form.goodsNo" placeholder="请输入编码" />
</el-form-item>
<el-form-item label="名称" prop="goodsName">
<el-input v-model="form.goodsName" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="产地" prop="goodsPlace">
<el-input v-model="form.goodsPlace" placeholder="请输入产地" />
</el-form-item>
<el-form-item label="品牌" prop="goodsBrand">
<el-input v-model="form.goodsBrand" placeholder="请输入品牌" />
</el-form-item>
<el-form-item label="规格" prop="goodsSpec">
<el-input v-model="form.goodsSpec" placeholder="请输入规格" />
</el-form-item>
<el-form-item label="单位" prop="goodsUnit">
<el-input v-model="form.goodsUnit" placeholder="请输入单位" />
</el-form-item>
<el-form-item label="库存" prop="goodsStock">
<el-input v-model="form.goodsStock" placeholder="请输入库存" />
</el-form-item>
<el-form-item label="价格" prop="goodsPrice">
<el-input v-model="form.goodsPrice" placeholder="请输入价格" />
</el-form-item>
<el-form-item label="售价" prop="salePrice">
<el-input v-model="form.salePrice" placeholder="请输入售价" />
</el-form-item>
<el-form-item label="二维码" prop="goodsQrcode">
<el-input v-model="form.goodsQrcode" placeholder="请输入二维码" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<el-dialog :title="title" v-model="open" width="700px" append-to-body draggable>
<el-form ref="goodsInfoRef" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12"><el-form-item label="编码" prop="goodsNo">
<el-input v-model="form.goodsNo" placeholder="请输入编码" />
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="名称" prop="goodsName">
<el-input v-model="form.goodsName" placeholder="请输入名称" />
</el-form-item></el-col>
</el-row>
<el-form-item label="产地" prop="goodsPlace">
<!-- <el-input v-model="form.goodsPlace" placeholder="请输入产地" />-->
<el-cascader
size="large"
:options="options"
v-model="form.goodsPlace"
@change="handleGoodsPlace">
</el-cascader>
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="品牌" prop="goodsBrand">
<el-input v-model="form.goodsBrand" placeholder="请输入品牌" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="规格" prop="goodsSpec">
<el-input v-model="form.goodsSpec" placeholder="请输入规格" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="单位" prop="goodsUnit">
<!-- <el-input v-model="form.goodsUnit" placeholder="请输入单位" />-->
<el-select
v-model="form.goodsUnit"
filterable
allow-create
default-first-option
:reserve-keyword="false"
placeholder="请选择商品单位"
@change="handleGoodsUnit"
>
<el-option
v-for="item in GoodsOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="库存" prop="goodsStock">
<el-input v-model="form.goodsStock" placeholder="请输入库存" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="价格" prop="goodsPrice">
<el-input v-model="form.goodsPrice" placeholder="请输入价格" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="售价" prop="salePrice">
<el-input v-model="form.salePrice" placeholder="请输入售价" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="二维码" prop="goodsQrcode">
<el-input v-model="form.goodsQrcode" placeholder="请输入二维码" />
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="GoodsInfo">
import { listGoodsInfo, getGoodsInfo, delGoodsInfo, addGoodsInfo, updateGoodsInfo } from "@/api/shop/goodsInfo";
import { regionDataPlus , CodeToText } from 'element-china-area-data'
const { proxy } = getCurrentInstance();
@ -175,6 +226,99 @@ const multiple = ref(true);
const total = ref(0);
const title = ref("");
//校验输入编码规则
const checkGoodsNo = (rule, value, callback)=>{
if (value !== '' && value !== null) {
if (!/^-?[1-9]\d*$/.test(value)) {
callback(new Error('编码必须为数字'))
} else if (!/^\d{6,9}$/.test(value)){
callback(new Error('编码必须为6-9位数字'))
}else {
callback()
}
} else {
callback(new Error('编码不能为空'))
}
}
//库存总量规则校验
const checkGoodsStock = (rules,value,callback)=>{
if (value !== '' && value !== null) {
console.log(form.goodsUnit)
if(form.goodsUnit !== 'kg'){
if (!/^-?[1-9]\d*$/.test(value)) {
callback(new Error('库存总量必须为整数'))
}else if(value < 0){
callback(new Error('库存总量必须为正整数'))
}else {
callback()
}
}else {
if (value < 0){
callback(new Error('库存总量不能小于0'))
}else if (!/^((([^0][0-9]+|0)\.([0-9]{1,2}))$)|^(([1-9]+)\.([0-9]{1,3})$)/.test(value)){
callback(new Error('库存总量最多保留三位小数'))
}else {
callback()
}
}
} else {
callback(new Error('库存总量不能为空'))
}
}
//商品价格规则校验
const checkGoodsPrice = (rules,value,callback)=>{
if (value !== '' && value !== null) {
if(value < 0){
callback(new Error('商品价格不能为负数'))
}else{
if(value.indexOf(".") !==0) {
if (!/^(([^0][0-9]+|0)\.([0-9])$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,3})$)|^(([1-9]+)$)/.test(value)) {
callback(new Error('商品价格最多保留三位小数'))
}else {
callback()
}
}else {
if(value.substr(0,1) === '.'){
callback(new Error('商品价格输入格式不正确'))
}
}
}
} else {
callback(new Error('商品价格不能为空'))
}
}
const options = regionDataPlus
const GoodsOptions = [
{value: 'kg',
label: '千克'},
{
value: '袋',
label: '袋'
},
{
value: '套',
label: '套'
},
{
value: '个',
label: '个'
},
{
value: '打',
label: '打'
},
{
value: '箱',
label: '箱'
},
{
value: '件',
label: '件'
}
]
const data = reactive({
form: {},
queryParams: {
@ -183,13 +327,18 @@ const data = reactive({
goodsNo: null,
goodsName: null,
goodsBrand: null,
goodsPlace: null
},
rules: {
// goodsNo: [
// { required: true, message: "编码不能为空", trigger: "blur" },
// {type: 'number', message: "编码必须为数字", trigger: "blur"}
// ],
goodsNo: [
{ required: true, message: "编码不能为空", trigger: "blur" }
{ validator: checkGoodsNo, trigger: "blur" }
],
goodsName: [
{ required: true, message: "名称不能为空", trigger: "blur" }
{ required: true, message: "名称不能为空", trigger: "blur" }
],
goodsPlace: [
{ required: true, message: "产地不能为空", trigger: "blur" }
@ -204,13 +353,16 @@ const data = reactive({
{ required: true, message: "单位不能为空", trigger: "blur" }
],
goodsStock: [
{ required: true, message: "库存不能为空", trigger: "blur" }
{ validator: checkGoodsStock, trigger: "blur" }
// { required: true, message: "库存不能为空", trigger: "blur" }
],
goodsPrice: [
{ required: true, message: "价格不能为空", trigger: "blur" }
{ validator: checkGoodsPrice, trigger: "blur" }
// { required: true, message: "价格不能为空", trigger: "blur" }
],
salePrice: [
{ required: true, message: "售价不能为空", trigger: "blur" }
{ validator: checkGoodsPrice, trigger: "blur" }
// { required: true, message: "售价不能为空", trigger: "blur" }
],
goodsQrcode: [
{ required: true, message: "二维码不能为空", trigger: "blur" }
@ -220,6 +372,45 @@ const data = reactive({
const { queryParams, form, rules } = toRefs(data);
// 产地选择
function getCodeToText(codeStr, codeArray) {
if (null === codeStr && null === codeArray) {
return null;
} else if (null === codeArray) {
codeArray = codeStr.split(",");
}
let area = "";
switch (codeArray.length) {
case 1:
area += CodeToText[codeArray[0]];
break;
case 2:
area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
break;
case 3:
area +=
CodeToText[codeArray[0]] +
"/" +
CodeToText[codeArray[1]] +
"/" +
CodeToText[codeArray[2]];
break;
default:
break;
}
return area;
}
function handleGoodsPlace (value) {
console.log(value)
form.goodsPlace = getCodeToText(null, value)
}
// 商品单位选择
function handleGoodsUnit(value) {
form.goodsUnit = value
}
/** 查询商品信息列表 */
function getList() {
loading.value = true;

8
src/views/shop/info/index.vue
View File

@ -77,10 +77,10 @@
</right-toolbar>
</el-row>
<div class="grid" style="margin-left:1%;margin-right:1%;width: 80vw;height: 70vh;" v-if="showGrid">
<el-row :gutter="20">
<el-col :span="4" v-for="(item, key) in infoList" :key="key" :offset="2" >
<div style="margin-top:15px">
<div class="grid" style="width: 80vw;height: 75vh;" v-if="showGrid">
<el-row :gutter="20" justify="space-around">
<el-col v-for="(item, key) in infoList" :key="key" :span="25">
<div style="margin-top:10px">
<el-card shadow="hover" :span="1" style="max-width: 400px;text-align: center;margin-bottom: 80px;">
<el-image :src="getImgUrl(item.shopImg)" style="height: 180px;width: 200px;" ></el-image>
<div style="text-align: left;margin: 10px;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">

19
src/views/shop/templateInfo/draw.vue
View File

@ -3,7 +3,7 @@
<el-page-header title="返回" content="模板编辑" @back="$router.back()">
<template #extra>
<el-button-group>
<el-button @click="reset">重置</el-button>
<el-button @click="reset" :loading="loading">重置</el-button>
<el-button @click="submitForm" type="primary">保存</el-button>
</el-button-group>
</template>
@ -74,6 +74,8 @@ const route = useRoute();
const drawCanvasRef = ref(null);
const loading = ref(false);
let blockIndex = 0;
const data = reactive({
@ -100,9 +102,8 @@ onBeforeMount(() => {
const {form, rules, content, selectBlock} = toRefs(data);
/** 查询模板信息列表 */
function getItem() {
async function getItem() {
selectBlock.value = null
getTemplateInfo(route.params.templateId).then(({data}) => {
if (data.content) {
let temp = JSON.parse(data.content)
@ -120,8 +121,11 @@ function getItem() {
}
// 表单重置
function reset() {
getItem()
async function reset() {
loading.value = true
await getItem()
loading.value = false
proxy.$modal.msgSuccess("重置成功");
}
/** 提交按钮 */
@ -138,12 +142,13 @@ function submitForm() {
if (formData.templateId != null) {
updateTemplateInfo(formData).then(response => {
proxy.$modal.msgSuccess("修改成功");
getItem();
//不重新渲染
// getItem();
});
} else {
addTemplateInfo(formData).then(response => {
proxy.$modal.msgSuccess("新增成功");
getItem();
// getItem();
});
}
}

2
vite.config.js
View File

@ -32,7 +32,7 @@ export default defineConfig(({ mode, command }) => {
// https://cn.vitejs.dev/config/#server-proxy
'/dev-api': {
// target: 'http://192.168.4.24:8080',
target: 'http://192.168.4.45:8039',
target: 'http://192.168.4.45:8869',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}