|
|
|
|
@ -3,23 +3,81 @@
|
|
|
|
|
<el-scrollbar class="step-content">
|
|
|
|
|
<el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
|
|
|
|
|
<el-form-item label="商品属性" prop="category">
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<span class="label">属性规格:</span>
|
|
|
|
|
<el-input v-model="skuName">
|
|
|
|
|
<template #append>
|
|
|
|
|
<el-button @click="handleAddSku"><el-icon name="Check" /></el-button>
|
|
|
|
|
<ul class="flex">
|
|
|
|
|
<li class="flex">
|
|
|
|
|
<span class="label">属性规格:</span>
|
|
|
|
|
<el-input v-model="skuName">
|
|
|
|
|
<template #append>
|
|
|
|
|
<el-button @click="handleAddSku"><el-icon name="Check" /></el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li v-for="(sku, i) in form.skus" :key="i" class="flex">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<span class="label">{{ sku.name }}:</span>
|
|
|
|
|
<el-tag
|
|
|
|
|
v-for="(item, j) in sku.values"
|
|
|
|
|
:key="i + '' + j"
|
|
|
|
|
closable
|
|
|
|
|
@close="handleDelValue(sku, j)"
|
|
|
|
|
>
|
|
|
|
|
{{ item }}
|
|
|
|
|
</el-tag>
|
|
|
|
|
<el-input v-model="skuValue[i]">
|
|
|
|
|
<template #append>
|
|
|
|
|
<el-button @click="handleAddValue(sku, i)"><el-icon name="Check" /></el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<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>
|
|
|
|
|
<el-button type="text" @click="handleDelSku(i)">删除</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<el-table border :data="form.skuInfos" style="width: 100%">
|
|
|
|
|
<el-table-column
|
|
|
|
|
v-for="(sku, index) in form.skus"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="sku.name"
|
|
|
|
|
:prop="'attr' + index"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column label="售价（元）" prop="sales">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-input-number v-model="row.sales" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-for="(sku, i) in form.skus" :key="i" class="flex">
|
|
|
|
|
<span class="label">尺码:</span>
|
|
|
|
|
<el-tag v-for="(item, j) in sku.values" :key="i + '' + j">{{ item }}</el-tag>
|
|
|
|
|
<el-input v-model="skuValue[i]">
|
|
|
|
|
<template #append>
|
|
|
|
|
<el-button><el-icon name="Check" /></el-button>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="商品库存" prop="inventory">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-input-number v-model="row.inventory" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="成本价（元）" prop="price">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-input-number v-model="row.price" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="库存预警值" prop="warn">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-input-number v-model="row.warn" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="SKU编号" prop="no" />
|
|
|
|
|
<el-table-column label="启用" prop="enabled">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-switch v-model="row.enabled" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="商品图片" prop="picture">
|
|
|
|
|
<el-upload-image v-model="form.picture" config-id="product" :limit="5" />
|
|
|
|
|
@ -42,6 +100,7 @@
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const store = useStore();
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
|
|
|
|
const state = reactive({
|
|
|
|
|
loading: false,
|
|
|
|
|
@ -52,6 +111,7 @@
|
|
|
|
|
form: {
|
|
|
|
|
id: '123',
|
|
|
|
|
skus: [],
|
|
|
|
|
skuInfos: [],
|
|
|
|
|
picture: [],
|
|
|
|
|
desc: null,
|
|
|
|
|
},
|
|
|
|
|
@ -69,7 +129,52 @@
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
onActivated(handleLoad);
|
|
|
|
|
const handleAddSku = () => {};
|
|
|
|
|
watch(
|
|
|
|
|
() => state.form.skus,
|
|
|
|
|
(skus) => {
|
|
|
|
|
state.form.skuInfos = skus.reduce(
|
|
|
|
|
(info, sku) => {
|
|
|
|
|
let res = [];
|
|
|
|
|
info.forEach((row) => {
|
|
|
|
|
sku.values.forEach((value) => {
|
|
|
|
|
res.push({ ...row, ['attr' + state.form.skus.indexOf(sku)]: value });
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
return res;
|
|
|
|
|
},
|
|
|
|
|
[{ sales: 0, inventory: 0, price: 0, warn: 100 }]
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true, deep: true }
|
|
|
|
|
);
|
|
|
|
|
const handleAddSku = () => {
|
|
|
|
|
if (state.skuName) {
|
|
|
|
|
state.form.skus.push({ name: state.skuName, values: [] });
|
|
|
|
|
state.skuName = null;
|
|
|
|
|
} else {
|
|
|
|
|
proxy.$message.error('请输入属性规格');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const handleDelSku = (index) => {
|
|
|
|
|
state.form.skus.splice(index, 1);
|
|
|
|
|
};
|
|
|
|
|
const handleMove = (oldIndex, newIndex) => {
|
|
|
|
|
let temp = state.form.skus[oldIndex];
|
|
|
|
|
state.form.skus[oldIndex] = state.form.skus[newIndex];
|
|
|
|
|
state.form.skus[newIndex] = temp;
|
|
|
|
|
};
|
|
|
|
|
const handleAddValue = (sku, index) => {
|
|
|
|
|
let value = state.skuValue[index];
|
|
|
|
|
if (value) {
|
|
|
|
|
sku.values.push(value);
|
|
|
|
|
state.skuValue[index] = null;
|
|
|
|
|
} else {
|
|
|
|
|
proxy.$message.error('请输入属性值');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const handleDelValue = (sku, index) => {
|
|
|
|
|
sku.values.splice(index, 1);
|
|
|
|
|
};
|
|
|
|
|
const handleSave = async () => {
|
|
|
|
|
state.loading = true;
|
|
|
|
|
try {
|
|
|
|
|
@ -92,6 +197,10 @@
|
|
|
|
|
opts,
|
|
|
|
|
handleSave,
|
|
|
|
|
handleAddSku,
|
|
|
|
|
handleDelSku,
|
|
|
|
|
handleMove,
|
|
|
|
|
handleAddValue,
|
|
|
|
|
handleDelValue,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
@ -111,6 +220,30 @@
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
ul.flex {
|
|
|
|
|
width: 100%;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 160px;
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
align-items: center;
|
|
|
|
|
&:not(:first-child) {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.el-tag {
|
|
|
|
|
+ .el-tag {
|
|
|
|
|
margin-left: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
+ .el-input {
|
|
|
|
|
margin-left: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
+ li {
|
|
|
|
|
margin-top: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.label {
|
|
|
|
|
word-break: keep-all;
|
|
|
|
|
margin-right: @layout-space;
|
|
|
|
|
|
向文可
2 years ago