feat: 属性规格

feature/task1.0.0__0514__ch
向文可 3 years ago
parent 16c23f6b14
commit 5e190cfd4f

@ -11,18 +11,17 @@ const actions = {
} }
return res || []; return res || [];
}, },
save: async ({ dispatch }, data) => { save: async (context, data) => {
let save = data.id ? api.updateAttrs : api.createAttrs; let save = data.id ? api.updateAttrs : api.createAttrs;
let res = await save(data); let res = await save(data);
if (res) { if (res) {
ElMessage.success('保存成功'); ElMessage.success('保存成功');
dispatch('search');
} else { } else {
ElMessage.error('保存失败'); ElMessage.error('保存失败');
} }
return res; return res;
}, },
remove: async ({ dispatch }, ids) => { remove: async (context, ids) => {
if (!ids.length) { if (!ids.length) {
ElMessage.warning('请选择要删除的数据'); ElMessage.warning('请选择要删除的数据');
} else { } else {
@ -31,7 +30,6 @@ const actions = {
let res = await api.removeAttrs({ id: ids.join(',') }); let res = await api.removeAttrs({ id: ids.join(',') });
if (res) { if (res) {
ElMessage.success('删除成功'); ElMessage.success('删除成功');
dispatch('search');
} else { } else {
ElMessage.error('删除失败'); ElMessage.error('删除失败');
} }

@ -11,18 +11,17 @@ const actions = {
} }
return res || []; return res || [];
}, },
save: async ({ dispatch }, data) => { save: async (context, data) => {
let save = data.id ? api.updateAttrsValue : api.createAttrsValue; let save = data.id ? api.updateAttrsValue : api.createAttrsValue;
let res = await save(data); let res = await save(data);
if (res) { if (res) {
ElMessage.success('保存成功'); ElMessage.success('保存成功');
dispatch('search');
} else { } else {
ElMessage.error('保存失败'); ElMessage.error('保存失败');
} }
return res; return res;
}, },
remove: async ({ dispatch }, ids) => { remove: async (context, ids) => {
if (!ids.length) { if (!ids.length) {
ElMessage.warning('请选择要删除的数据'); ElMessage.warning('请选择要删除的数据');
} else { } else {
@ -31,7 +30,6 @@ const actions = {
let res = await api.removeAttrsValue({ id: ids.join(',') }); let res = await api.removeAttrsValue({ id: ids.join(',') });
if (res) { if (res) {
ElMessage.success('删除成功'); ElMessage.success('删除成功');
dispatch('search');
} else { } else {
ElMessage.error('删除失败'); ElMessage.error('删除失败');
} }

@ -9,7 +9,7 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-for="(sku, i) in form.skus" :key="i" :label="sku.name"> <el-form-item v-for="(sku, i) in form.attrsGroupList" :key="i" :label="sku.name">
<div class="flex"> <div class="flex">
<div class="left"> <div class="left">
<el-tag <el-tag
@ -28,7 +28,11 @@
</div> </div>
<div class="right"> <div class="right">
<el-button :disabled="i === 0" type="text" @click="handleMove(i, i - 1)">上移</el-button> <el-button :disabled="i === 0" type="text" @click="handleMove(i, i - 1)">上移</el-button>
<el-button :disabled="i === form.skus.length - 1" type="text" @click="handleMove(i, i + 1)"> <el-button
:disabled="i === form.attrsGroupList.length - 1"
type="text"
@click="handleMove(i, i + 1)"
>
下移 下移
</el-button> </el-button>
<el-button type="text" @click="handleDelSku(i)"></el-button> <el-button type="text" @click="handleDelSku(i)"></el-button>
@ -38,7 +42,7 @@
</el-form> </el-form>
<el-table border :data="form.skuInfos" style="width: 100%"> <el-table border :data="form.skuInfos" style="width: 100%">
<el-table-column <el-table-column
v-for="(sku, index) in form.skus" v-for="(sku, index) in form.attrsGroupList"
:key="index" :key="index"
align="center" align="center"
header-align="center" header-align="center"
@ -65,7 +69,7 @@
<el-input-number v-model="row.warn" /> <el-input-number v-model="row.warn" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" header-align="center" label="SKU编号" min-width="100px" prop="no" /> <el-table-column align="center" header-align="center" label="SKU编号" min-width="100px" prop="id" />
<el-table-column align="center" header-align="center" label="启用" prop="enabled" width="80px"> <el-table-column align="center" header-align="center" label="启用" prop="enabled" width="80px">
<template #default="{ row }"> <template #default="{ row }">
<el-switch v-model="row.enabled" /> <el-switch v-model="row.enabled" />
@ -96,7 +100,7 @@
skuValue: [], skuValue: [],
form: { form: {
id: null, id: null,
skus: [], attrsGroupList: [],
skuInfos: [], skuInfos: [],
}, },
rules: {}, rules: {},
@ -113,55 +117,104 @@
); );
}); });
await Promise.all(arr); await Promise.all(arr);
state.form.skus = res; state.form.attrsGroupList = res;
} }
}; };
onActivated(handleLoad); onActivated(handleLoad);
watch( watch(
() => state.form.skus, () => state.form.attrsGroupList,
(skus) => { (attrsGroupList) => {
state.form.skuInfos = skus.reduce( const old = state.form.skuInfos;
(info, sku) => { state.form.skuInfos = attrsGroupList
.reduce(
(info, attrsGroup) => {
let res = []; let res = [];
if (attrsGroup.values?.length) {
info.forEach((row) => { info.forEach((row) => {
(sku.values || []).forEach((value) => { attrsGroup.values?.forEach((value) => {
res.push({ ...row, [sku.id + '']: value.name }); let temp = _.cloneDeep(row);
temp[attrsGroup.id + ''] = value.name;
temp.groups.push(value.id);
res.push(temp);
}); });
}); });
} else {
res = info;
}
return res; return res;
}, },
[{ sales: 0, inventory: 0, price: 0, warn: 100 }] [{ sales: 0, inventory: 0, price: 0, warn: 100, groups: [] }]
); )
.map((info) => {
let row = old.find((item) => item.groups.sort().join() === info.groups.sort().join());
if (row) {
Object.assign(info, row);
}
return info;
});
console.info(state.form.skuInfos, old);
}, },
{ immediate: true, deep: true } { deep: true }
); );
const handleAddSku = () => { const handleAddSku = async () => {
if (state.skuName) { if (state.skuName) {
state.form.skus.push({ name: state.skuName, values: [] }); let res = await store.dispatch('productAttrsGroup', {
name: state.skuName,
productId: route.params.id,
sort: state.form.attrsGroupList.length,
});
if (res) {
state.form.skuInfos = [];
state.form.attrsGroupList.push({ name: state.skuName, values: [] });
state.skuName = null; state.skuName = null;
} else {
proxy.$message.error('添加属性规格失败');
}
} else { } else {
proxy.$message.error('请输入属性规格'); proxy.$message.error('请输入属性规格');
} }
}; };
const handleDelSku = (index) => { const handleDelSku = async (index) => {
state.form.skus.splice(index, 1); let res = await store.dispatch('productAttrsGroup/remove', [state.form.attrsGroupList[index].id]);
if (res) {
state.form.attrsGroupList.splice(index, 1);
proxy.$message.success('删除成功');
} else {
proxy.$message.error('删除失败');
}
}; };
const handleMove = (oldIndex, newIndex) => { const handleMove = (oldIndex, newIndex) => {
let temp = state.form.skus[oldIndex]; let temp = state.form.attrsGroupList[oldIndex];
state.form.skus[oldIndex] = state.form.skus[newIndex]; state.form.attrsGroupList[oldIndex] = state.form.attrsGroupList[newIndex];
state.form.skus[newIndex] = temp; state.form.attrsGroupList[newIndex] = temp;
}; };
const handleAddValue = (sku, index) => { const handleAddValue = async (sku, index) => {
let value = state.skuValue[index]; let value = state.skuValue[index];
if (value) { if (value) {
sku.values.push(value); let res = await store.dispatch('productAttrsValue/save', {
state.skuValue[index] = null; name: value,
productAttributeGroupId: sku.id,
productId: route.params.id,
sort: sku.values.length,
symbol: Date.now(),
});
if (res) {
sku.values = await store.dispatch('productAttrsValue/search', sku.id);
} else {
proxy.$message.error('添加属性值失败');
}
} else { } else {
proxy.$message.error('请输入属性值'); proxy.$message.error('请输入属性值');
} }
}; };
const handleDelValue = (sku, index) => { const handleDelValue = async (sku, index) => {
let res = await store.dispatch('productAttrsValue/remove', [sku.values[index].id]);
if (res) {
sku.values.splice(index, 1); sku.values.splice(index, 1);
proxy.$message.success('删除成功');
} else {
proxy.$message.error('删除失败');
}
}; };
const handleSave = async () => { const handleSave = async () => {
state.loading = true; state.loading = true;

Loading…
Cancel
Save