czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品管理编辑更新，修复单规格多规格切换保存报错问题，增加部分必填项验证

Browse Source
This commit is contained in:
YeMingfei666
2024-10-15 15:22:37 +08:00
parent 24f34e8f8c
commit a5091f8f2d
5 changed files with 323 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
pageProduct/add-specifications/choose-specifications.vue
View File

@@ -15,11 +15,11 @@
</view>
<view class="">
<view class="u-m-t-32" v-for="(item,index) in FormData.selectSpec" :key="index">
<view class="font-bold">
{{item.name}}
</view>
<view class="u-m-t-24">
<uni-data-checkbox @change="createResult" multiple :selectedColor="color.ColorMain"
v-model="item.selectSpecResult" :localdata="item.value"></uni-data-checkbox>
@@ -29,22 +29,15 @@
</view>
</view>
</view>
<!-- <view class="block u-m-b-32 u-p-30">
<view class="font-bold">批量修改</view>
<view class="u-flex fast-edit u-flex-wrap gap-20 u-m-t-12">
<view class="color-main item u-flex u-row-center u-col-center" v-for="(item,index) in fastEdit.list" :key="index">
<view class="u-flex u-col-center">
<view class="u-m-r-12">{{item.text}}</view>
<up-icon size="16" :color="color.ColorMain" name="edit-pen"></up-icon>
</view>
</view>
</view>
</view> -->
<view>
<view class="block u-m-b-32" v-for="(item,index) in FormData.result" :key="index">
</uni-forms>
<view>
<view class="block u-m-b-32" v-for="(item,index) in FormData.result" :key="index">
<uni-forms :model="item.skus" :rules="rules" :ref="setFormRef(index)" err-show-type="undertext"
validateTrigger="blur" :border="true" :label-width="130">
<view class="">
<view class="u-m-t-16" v-for="(val,key) in item.names" :key="key">
<text class="font-bold u-m-r-12">
@@ -54,21 +47,19 @@
</view>
</view>
<view class="u-m-t-24">
<view label="">
<view label="">
<view class="font-bold">
图片
</view>
</view>
<view class="u-m-t-24">
<my-upload-file @change="changeResultCover($event,index)" :limit="1" :ref="setRefFile(index)" :images="item.coverImg"></my-upload-file>
</view>
<!-- <uni-file-picker v-model="FormData.images" file-mediatype="image" mode="grid"
:limit="10" @progress="FileUploadprogress" @success="FileUploadsuccess"
@fail="FileUploadail" @select="FileUploadselect" /> -->
<my-upload-file @change="changeResultCover($event,index)" :limit="1"
:ref="setRefFile(index)" :images="item.coverImg"></my-upload-file>
</view>
</view>
</view>
<view class="skus u-m-t-32">
<view class="">
<uni-forms-item label="售价" required>
<uni-forms-item label="售价" required name="salePrice">
<uni-easyinput @blur="priceFormat(item.skus,'salePrice')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="item.skus.salePrice" type="digit"
@@ -76,25 +67,25 @@
</uni-forms-item>
</view>
<uni-forms-item label="会员价（元）" required>
<uni-forms-item label="会员价（元）" required name="memberPrice">
<uni-easyinput @blur="priceFormat(item.skus,'memberPrice')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="item.skus.memberPrice" type="digit"
placeholder="请输入会员价（元）" />
</uni-forms-item>
<uni-forms-item label="成本价（元）" required>
<uni-forms-item label="成本价（元）" required name="costPrice">
<uni-easyinput @blur="priceFormat(item.skus,'costPrice')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="item.skus.costPrice" type="digit"
placeholder="请输入成本价（元）" />
</uni-forms-item>
<uni-forms-item label="原价（元）" required>
<uni-forms-item label="原价（元）" required name="originPrice">
<uni-easyinput @blur="priceFormat(item.skus,'originPrice')"
:paddingNone="inputPaddingNone" :placeholderStyle="placeholderStyle"
:inputBorder="inputBorder" v-model="item.skus.originPrice" type="digit"
placeholder="请输入原价（元）" />
</uni-forms-item>
<uni-forms-item label="起售数量" required>
<uni-forms-item label="起售数量" required name="suit">
<uni-easyinput @blur="priceFormat(item.skus,'suit')" :paddingNone="inputPaddingNone"
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.skus.suit" type="digit" placeholder="请输入起售数量" />
@@ -116,10 +107,11 @@
:placeholderStyle="placeholderStyle" :inputBorder="inputBorder"
v-model="item.skus.barCode" placeholder="请输入商品条码" />
</uni-forms-item>
</view>
</view>
</uni-forms>
</view>
</uni-forms>
</view>
</view>
<view class="save-btn-box">
@@ -132,20 +124,20 @@
</view>
</button>
</view>
</view>
</view>
<view class="bottom" ref="bottom"></view>
<pop-fast-edit @update="updateSkuKey" v-model:show="fastEdit.show"></pop-fast-edit>
<pop-fast-edit @update="updateSkuKey" v-model:show="fastEdit.show"></pop-fast-edit>
</view>
</template>
<script setup>
import myUploadFile from '@/components/my-components/my-upload-file'
import {
formatPrice
} from "@/commons/utils/format.js";
import popFastEdit from "./components/fast-edit.vue"
import infoBox from '@/commons/utils/infoBox.js'
const refFiles = ref([]);
//绑定文件上传元素
function setRefFile(index) {
@@ -156,27 +148,51 @@
}
};
}
const fastEdit=reactive({
show:false,
list:[
{text:'会员价',key:'memberPrice',value:''},
{text:'成本价',key:'costPrice',value:''},
{text:'原价',key:'originPrice',value:''},
{text:'起售数量',key:'suit',value:''},
{text:'库存数量',key:'stockNumber',value:''},
{text:'分销金额',key:'firstShared',value:''}
const fastEdit = reactive({
show: false,
list: [{
text: '会员价',
key: 'memberPrice',
value: ''
},
{
text: '成本价',
key: 'costPrice',
value: ''
},
{
text: '原价',
key: 'originPrice',
value: ''
},
{
text: '起售数量',
key: 'suit',
value: ''
},
{
text: '库存数量',
key: 'stockNumber',
value: ''
},
{
text: '分销金额',
key: 'firstShared',
value: ''
}
],
sel:''
sel: ''
})
function fastEditShow(){
fastEdit.show=true
function fastEditShow() {
fastEdit.show = true
}
//上个页面传来的参数
let option={}
let option = {}
//number类型数据限制
function priceFormat(item, key) {
nextTick(() => {
@@ -218,22 +234,22 @@
watch
} from 'vue';
function updateSkuKey(arr){
for(let i in FormData.result){
const sku=FormData.result[i].skus
for(let k in arr){
const item=arr[k]
if(sku.hasOwnProperty(item.key)){
sku[item.key]=item.value
function updateSkuKey(arr) {
for (let i in FormData.result) {
const sku = FormData.result[i].skus
for (let k in arr) {
const item = arr[k]
if (sku.hasOwnProperty(item.key)) {
sku[item.key] = item.value
}
}
}
}
const inputPaddingNone = ref(true)
const form = ref(null)
const originSpecMap={}
const originSpecMap = {}
const FormData = reactive({
specId: '',
specItem: '',
@@ -241,11 +257,20 @@
selectSpec: [],
})
//表单相关事件
function changeResultCover(val,index) {
FormData.result[index].coverImg=val
function changeResultCover(val, index) {
FormData.result[index].coverImg = val
console.log(FormData.result[index]);
}
const formRefs = ref([]);
//绑定表单元素
function setFormRef(index) {
formRefs.value[index] = null;
return (el) => {
if (el) {
formRefs.value[index] = el;
}
};
}
watch(() => FormData.specId, (newval) => {
FormData.result = []
})
@@ -276,21 +301,21 @@
};
const defaultSku = reactive({
...$defaultSku,
shopId:uni.getStorageSync('shopId'),
coverImg:'',
productId:option.productId,
shopId: uni.getStorageSync('shopId'),
coverImg: '',
productId: option.productId,
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()}`
})
function returnDefaultSku(){
const randomNumber=Math.floor(Math.random()*1000)
function returnDefaultSku() {
const randomNumber = Math.floor(Math.random() * 1000)
return {
...defaultSku,
productId:option.productId,
productId: option.productId,
barCode: `${uni.getStorageSync("shopId")}${dayjs().valueOf()-randomNumber}`
}
}
function createResult() {
let arr = []
for (let k of FormData.selectSpec) {
@@ -305,20 +330,20 @@
FormData.result = spes.filter(v => {
return !Array.isArray(v)
}).map(v => {
const specSnap=returnSpecSnap(v)
const data= originSpecMap[specSnap]
const skus=returnDefaultSku()
const newdata={
const specSnap = returnSpecSnap(v)
const data = originSpecMap[specSnap]
const skus = returnDefaultSku()
const newdata = {
names: v,
specSnap,
skus
}
return data||newdata
return data || newdata
})
console.log(FormData.result);
}
function specIdChange(e) {
console.log(e);
@@ -356,7 +381,31 @@
//表单验证
const rules = {
optionPrice: {
salePrice: {
rules: [{
required: true,
errorMessage: '必填'
}]
},
memberPrice: {
rules: [{
required: true,
errorMessage: '必填'
}]
},
costPrice: {
rules: [{
required: true,
errorMessage: '必填'
}]
},
originPrice: {
rules: [{
required: true,
errorMessage: '必填'
}]
},
suit: {
rules: [{
required: true,
errorMessage: '必填'
@@ -388,27 +437,27 @@
uni.$emit(emitName, data)
}
}
//生成name
function returnSpecSnap(names){
const specSnap=Object.keys(names).reduce((prve,cur)=>{
return prve+names[cur]+','
},'')
return specSnap.substring(0,specSnap.length-1)
function returnSpecSnap(names) {
const specSnap = Object.keys(names).reduce((prve, cur) => {
return prve + names[cur] + ','
}, '')
return specSnap.substring(0, specSnap.length - 1)
}
onLoad(opt => {
getTbProductSpec()
const obj = uni.getStorageSync('guige')
if (obj&&JSON.stringify(obj) !== '{}') {
if (obj && JSON.stringify(obj) !== '{}') {
console.log(obj.selectSpec);
option.productId=opt.productId
option.productId = opt.productId
Object.assign(FormData, obj)
for(let i of obj.result){
const key=returnSpecSnap(i.names)
originSpecMap[key]=i
for (let i of obj.result) {
const key = returnSpecSnap(i.names)
originSpecMap[key] = i
}
nextTick(() => {
FormData.result = obj.result
@@ -433,7 +482,6 @@
function returnPromise(prosise) {
return new Promise((resolve, reject) => {
prosise.then(res => {
console.log(res);
resolve({
sucees: true
})
@@ -446,14 +494,21 @@
})
}
async function save() {
let isAllPassForm = 0
const res = await returnPromise(form.value.validate())
//判断验证是否通过
if (res.sucees) {
console.log('pass');
console.log(FormData);
emitspecificationsSave()
if (!FormData.result.length) {
return infoBox.showToast('清先选择规格！')
}
let isAllPassForm = 0
for (let i in FormData.result) {
const res = await returnPromise(formRefs.value[i].validate(), i)
isAllPassForm += res.sucees ? 1 : 0
}
if (isAllPassForm < FormData.result.length) {
return infoBox.showToast('清完善规格属性的参数！')
}
//判断验证是否通过
console.log('pass');
console.log(FormData);
emitspecificationsSave()
}
</script>
@@ -591,12 +646,14 @@
border-radius: 12rpx;
font-size: 28rpx;
}
.edit-btn{
.edit-btn {
background-color: #fff;
color: #333;
border-radius: 12rpx;
font-size: 28rpx;
}
.btn-hover-class {
opacity: .6;
}
@@ -607,18 +664,21 @@
padding-left: 42rpx;
border-radius: 14rpx 14rpx 14rpx 14rpx;
}
.fast-edit{
.item{
.fast-edit {
.item {
color: #333;
border: 1px solid #bbb;
padding: 4rpx 10rpx 8rpx 10rpx;
border-radius: 10rpx;
min-width: 186rpx;
&.active{
&.active {
color: $my-main-color;
}
}
}
::v-deep .uni-input-placeholder {
font-size: 28rpx;
}