zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

合并shuai分支 优化正则校验以及商品发布中样式 ，后续会优化商品发布中规格问题

master
lemon橪 2021-09-26 16:36:57 +08:00
parent b61faef093 20042786aa
commit 8a2a946bc1
12 changed files with 262 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.idea/misc.xml
View File

@ -3,4 +3,7 @@
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
<component name="WebPackConfiguration">
<option name="mode" value="DISABLED" />
</component>
</project>

31
manager/src/utils/regular.js
View File

@ -57,3 +57,34 @@ export const URL =
// 固话
export const TEL = /0\d{2,3}-\d{7,8}/
// 正整数
export const INTEGER = {
pattern: /^[0-9]\d*$/,
message:'请输入正整数'
}
export const VARCHAR5 = {
pattern:/^.{1,5}$/,
message:'长度应该限制在1-5个字符'
}
export const VARCHAR20 = {
pattern:/^.{1,20}$/,
message:'长度应该限制在1-20个字符'
}
export const VARCHAR255 = {
pattern:/^.{1,255}$/,
message:'超出最大长度限制'
}
export const URL200 = {
pattern:/[a-zA-z]+\:\/\/[^\s]{1,190}/,
message:'请输入长度不超过200的URL地址'
}
export const REQUIRED = {
required: true,
message:'请填写参数'
}

12
manager/src/views/goods-unit/index.vue
View File

@ -57,6 +57,9 @@ import {
updateGoodsUnit,
delGoodsUnit
} from "@/api/index";
import {regular} from "@/utils";
export default {
name: "goods-unit",
data() {
@ -79,12 +82,9 @@ export default {
// 表单验证规则
formValidate: {
name: [
{
required: true,
message: "请输入计量单位",
trigger: "blur",
},
],
regular.REQUIRED,
regular.VARCHAR5
]
},
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据

19
manager/src/views/goods/goods-manage/brand.vue
View File

@ -1,7 +1,8 @@
<template>
<div class="search">
<Card>
<Form ref="searchForm" @keydown.enter.native="handleSearch" :model="searchForm" inline :label-width="70" class="search-form">
<Form ref="searchForm" @keydown.enter.native="handleSearch" :model="searchForm" inline :label-width="70"
class="search-form">
<Form-item label="品牌名称">
<Input type="text" v-model="searchForm.name" placeholder="请输入品牌名称" clearable style="width: 200px"/>
</Form-item>
@ -12,7 +13,8 @@
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table"></Table>
<Row type="flex" justify="end" class="mt_10">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small"
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
@on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small"
show-total show-elevator show-sizer></Page>
</Row>
</Card>
@ -43,6 +45,8 @@ import {
} from "@/api/goods";
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
import {regular} from "@/utils";
export default {
name: "brand",
components: {
@ -68,7 +72,16 @@ export default {
deleteFlag: "",
},
// 表单验证规则
formValidate: {},
formValidate: {
name: [
regular.REQUIRED,
regular.VARCHAR20
],
logo: [
regular.REQUIRED,
regular.URL200
],
},
submitLoading: false, // 添加或编辑提交状态
columns: [
{

12
manager/src/views/goods/goods-manage/category.vue
View File

@ -171,9 +171,17 @@ export default {
// 表单验证规则
formValidate: {
commissionRate: [
{ required: true, message: "请填写佣金比例" },
{ pattern: regular.Integer, message: "佣金比例不能为负" },
regular.REQUIRED,
regular.INTEGER
],
name:[
regular.REQUIRED,
regular.VARCHAR20,
],
sortOrder:[
regular.REQUIRED,
regular.INTEGER
]
},
columns: [
{

16
manager/src/views/goods/goods-manage/spec.vue
View File

@ -56,7 +56,8 @@
:mask-closable="false"
:width="500"
>
<Form ref="form" :model="form" :label-width="100">
<Form ref="form" :model="form" :label-width="100"
:rules="formValidate">
<FormItem label="规格名称" prop="specName">
<Input v-model="form.specName" maxlength="30" clearable style="width: 100%"/>
</FormItem>
@ -92,6 +93,7 @@ import {
delSpec
} from "@/api/goods";
import {regular} from "@/utils";
export default {
name: "spec",
components: {},
@ -108,6 +110,17 @@ export default {
sort: "createTime", // 默认排序字段
order: "asc", // 默认排序方式
},
// 表单验证规则
formValidate: {
specName: [
regular.REQUIRED,
regular.VARCHAR20
],
specValue: [
regular.REQUIRED,
regular.VARCHAR255
],
},
form: {
// 添加或编辑表单对象初始化数据
specName: "",
@ -280,6 +293,7 @@ export default {
this.modalType = 0;
this.modalTitle = "添加";
this.$refs.form.resetFields();
this.specValue = '';
delete this.form.id;
this.modalVisible = true;
},

87
manager/src/views/sys/setting-manage/setting/IM_SETTING.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div class="layout">
<Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
<FormItem label="云IM地址" prop="httpUrl">
<Input v-model="formValidate.httpUrl"/>
</FormItem>
<FormItem label="平台ID" class="label-item" prop="tenantId">
<Input v-model="formValidate.tenantId"/>
</FormItem>
<div class="label-btns">
<Button type="primary" @click="submit('formValidate')">保存</Button>
</div>
</Form>
</div>
</template>
<script>
import {setSetting} from "@/api/index";
import {handleSubmit} from "./validate";
export default {
data() {
return {
ruleValidate: {}, // 验证规则
formValidate: { // 表单数据
httpUrl: "",
tenantId: ""
},
};
},
props: ["res", "type"],
created() {
this.init();
},
methods: {
// 保存
submit(name) {
let that = this;
if (handleSubmit(that, name)) {
this.setupSetting()
}
},
// 保存设置
setupSetting() {
setSetting(this.type, this.formValidate).then((res) => {
if (res.success) {
this.$Message.success("保存成功!");
} else {
this.$Message.error("保存失败!");
}
});
},
// 实例化数据
init() {
this.res = JSON.parse(this.res);
this.$set(this, "formValidate", {...this.res});
Object.keys(this.formValidate).forEach((item) => {
this.ruleValidate[item] = [
{
required: true,
message: "请填写必填项",
trigger: "blur",
},
];
});
},
},
};
</script>
<style lang="scss" scoped>
@import "./style.scss";
.label-item {
display: flex;
}
/deep/ .ivu-input {
width: 300px !important;
margin: 0 10px;
}
.ivu-input-wrapper {
width: 300px;
margin-right: 10px;
}
</style>

5
manager/src/views/sys/setting-manage/settingManage.vue
View File

@ -57,6 +57,11 @@ export default {
type: "SMS_SETTING",
name: "阿里短信配置",
},
//阿里短信配置
{
type: "IM_SETTING",
name: "客服设置",
},
],
authLogin: [
// 微信设置

2
manager/src/views/sys/setting-manage/template.js
View File

@ -5,6 +5,7 @@ import POINT_SETTING from "./setting/POINT_SETTING";
import KUAIDI_SETTING from "./setting/KUAIDI_SETTING";
import OSS_SETTING from "./setting/OSS_SETTING";
import SMS_SETTING from "./setting/SMS_SETTING";
import IM_SETTING from "./setting/IM_SETTING";
import WITHDRAWAL_SETTING from "./setting/WITHDRAWAL_SETTING";
import ALIPAY_PAYMENT from "./pay/ALIPAY_PAYMENT";
import WECHAT_PAYMENT from "./pay/WECHAT_PAYMENT";
@ -20,6 +21,7 @@ export default {
KUAIDI_SETTING,
OSS_SETTING,
SMS_SETTING,
IM_SETTING,
WITHDRAWAL_SETTING,
PAYMENT_SUPPORT,
WECHAT_PAYMENT,

18
seller/src/views/goods/goods-seller/addGoods.scss
View File

@ -76,8 +76,16 @@
text-align: left;
}
}
.sku-val{
justify-content: flex-start;
flex-wrap: wrap;
>.sku-item-content-val{
margin-right: 20px;
}
}
div.base-info-item {
h4 {
margin-bottom: 10px;
@ -104,15 +112,23 @@ div.base-info-item {
margin-bottom: 20px;
.sku-item-content {
margin: 20px 0;
display: flex;
width: 100% !important;
flex: 1;
flex-direction: column;
align-items: flex-start;
justify-content: center;
justify-content: flex-start;
width: 100%;
>.ivu-card-body{
width: 100%;
}
.sku-item-content-name {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
}
}

116
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

@ -15,6 +15,9 @@
<Input type="text" v-model="baseInfoForm.goodsName" placeholder="商品名称" clearable style="width: 260px" />
</FormItem>
<FormItem label="商品价格" prop="price">
<Input type="text" v-model="baseInfoForm.price" placeholder="商品价格" clearable style="width: 260px" />
</FormItem>
<FormItem label="商品卖点" prop="sellingPoint">
<Input v-model="baseInfoForm.sellingPoint" type="textarea" :rows="4" style="width: 260px" />
</FormItem>
@ -47,15 +50,6 @@
</div>
<h4>商品规格及图片</h4>
<div class="form-item-view">
<FormItem label="商品编号" prop="sn">
<Input type="text" v-model="baseInfoForm.sn" placeholder="商品编号" clearable style="width: 260px" />
</FormItem>
<FormItem label="商品价格" prop="price">
<Input type="text" v-model="baseInfoForm.price" placeholder="商品价格" clearable style="width: 260px" />
</FormItem>
<FormItem label="市场价格" prop="cost">
<Input type="text" v-model="baseInfoForm.cost" placeholder="市场价格" clearable style="width: 260px" />
</FormItem>
<FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
<div style="display:flex;flex-wrap:flex-start;">
<vuedraggable :list="baseInfoForm.goodsGalleryFiles" :animation="200">
@ -89,43 +83,46 @@
<div class="layout" style="width: 100%">
<Collapse v-model="open_panel">
<Panel name="1">
规格名称
<div slot="content" class="sku-item-content">
自定义规格项
<div slot="content">
<Form>
<div class="sku-item" v-for="(item, $index) in skuInfo" :key="$index">
<Card :bordered="true">
<FormItem label="规格名：" class="sku-item-content-name">
<div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
<Card :bordered="true" class="ivu-card-body">
<Button type="primary" slot="extra" @click="handleCloseSkuItem($index)">
删除规格
</Button>
<FormItem label="规格名" :prop="'item.'+$index+'.name'" :rules="baseInfoFormRule.name"
class="sku-item-content-val flex">
<AutoComplete style="width: 150px" v-model="item.name" :maxlength="30"
placeholder="请输入规格项名称" :filter-method="filterMethod" :data="skuData"
@on-change="editSkuItem">
</AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除
</Button>
</FormItem>
<FormItem label="规格值：" prop="sku">
<div class="flex sku-val">
<!--规格值文本列表-->
<div v-for="(val, index) in item.spec_values" :key="index"
style="padding: 0px 20px 10px 0px; float: left">
<div>
<AutoComplete style="width: 150px; float: left" v-model="val.value" :maxlength="30"
placeholder="请输入规格值名称" :filter-method="filterMethod" :data="skuVal"
<FormItem v-for="(val, index) in item.spec_values" :key="index"
class="sku-item-content-val flex" label="规格项" :prop="'spec_values.'+index"
:rules="[regular.REQUIRED, regular.VARCHAR60]">
<AutoComplete v-model="val.value" style="width: 150px" :maxlength="30"
placeholder="请输入规格项" :filter-method="filterMethod" :data="skuVal"
@on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)">
</AutoComplete>
<Button type="error" style="margin-left: 10px"
<Button type="primary" size="small" style="margin-left: 10px"
@click="handleCloseSkuValue(item, index)">
删除
</Button>
</FormItem>
</div>
</div>
<div style="float: left">
<div>
<Button @click="addSpec($index, item)">添加规格值</Button>
</div>
</FormItem>
</Card>
</div>
</Form>
<Button class="add-sku-btn" type="primary" size="small" @click="addSkuItem">添加规格项目</Button>
<Button class="add-sku-btn" type="primary" size="small" @click="addSkuItem">添加规格项</Button>
</div>
</Panel>
<Panel name="2">
@ -213,12 +210,6 @@
<div v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'">
<h4>商品物流信息</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el" label="商品重量" prop="weight">
<Input v-model="baseInfoForm.weight">
<span slot="append">kg</span>
</Input>
</FormItem>
<FormItem class="form-item-view-el" label="物流模板" prop="templateId">
<Select v-model="baseInfoForm.templateId" style="width: 200px">
<Option v-for="item in logisticsTemplate" :value="item.id" :key="item.id">{{ item.name }}
@ -305,6 +296,7 @@ export default {
},
},
data() {
// 表单验证项，商品价格
const checkPrice = (rule, value, callback) => {
if (!value && value !== 0) {
@ -326,6 +318,8 @@ export default {
callback(new Error("商品编号不能为空"));
} else if (!/^[a-zA-Z0-9_\\-]+$/g.test(value)) {
callback(new Error("请输入数字、字母、下划线或者中划线"));
} else if (value.length > 30) {
callback(new Error("商品编号长度不能大于30"));
} else {
callback();
}
@ -343,6 +337,7 @@ export default {
}
};
return {
regular,
accessToken: "", //令牌token
goodsParams: "",
categoryId: "", // 商品分类第三级id
@ -365,8 +360,6 @@ export default {
/** 发布商品基本参数 */
baseInfoForm: {
salesModel: "RETAIL",
/** 商品重量 */
weight: "",
/** 商品相册列表 */
goodsGalleryFiles: [],
/** 是否立即发布 true 立即发布 false 放入仓库 */
@ -421,37 +414,13 @@ export default {
/** 存储未通过校验的单元格位置 */
validateError: [],
baseInfoFormRule: {
goodsName: [
{ required: true, message: "请输入商品名称" },
{
whitespace: true,
message: "商品名称不可为纯空格",
},
{
min: 3,
max: 60,
message: "长度在 3 到 60 个字符",
},
],
sn: [
{ required: true, message: "请输入商品编号" },
{ validator: checkSn },
],
price: [
{ required: true, message: "请输入商品价格" },
{ validator: checkPrice },
],
cost: [
{ required: true, message: "请输入市场价格" },
{ validator: checkPrice },
],
weight: [
{ required: true, message: "请输入商品重量" },
{ validator: checkWeight },
],
templateId: [{ required: true, message: "请选择物流模板" }],
sellingPoint: [{ required: true, message: "请输入商品卖点" }],
goodsName: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR60],
price: [regular.REQUIRED, { validator: checkPrice }],
sellingPoint: [regular.REQUIRED, regular.VARCHAR60],
goodsUnit: [{ required: true, message: "请选择计量单位" }],
name: [regular.REQUIRED, regular.VARCHAR5],
value: [regular.REQUIRED, regular.VARCHAR60],
templateId: [regular.REQUIRED],
},
/** 品牌列表 */
brandList: [],
@ -507,9 +476,9 @@ export default {
paramName: "",
paramValue: "",
isIndex: "",
required: "",
// required: "",
paramId: "",
sort: ""
sort: "",
};
}
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
@ -518,9 +487,9 @@ export default {
paramName: params.paramName,
paramValue: value,
isIndex: params.isIndex,
required: params.required,
// required: params.required,
paramId: params.id,
sort: params.sort
sort: params.sort,
};
},
// 编辑sku图片
@ -949,7 +918,7 @@ export default {
cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp);
this.skuTableData = result;
console.log(this.skuTableData)
console.log(this.skuTableData);
}
},
/**
@ -999,7 +968,6 @@ export default {
},
/** 数据改变之后 抛出数据 */
updateSkuTable(row, item, type = "deafult") {
let index = row._index;
this.baseInfoForm.regeneratorSkuFlag = true;
/** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
@ -1065,6 +1033,10 @@ export default {
ids += e.id + ",";
});
ids = ids.substring(0, ids.length - 1);
if (ids.length > 100) {
this.$Message.error("选择了过多的店铺分类，请谨慎选择");
}
this.baseInfoForm.storeCategoryPath = ids;
},
/** 添加商品 **/
@ -1134,6 +1106,8 @@ export default {
}
} else {
this.submitLoading = false;
this.$Message.error("还有必填项未做处理，请检查表单");
}
});
},