向文可
3 years ago
parent
0607c6dbaa
commit
3b7484026c
@ -0,0 +1,130 @@
|
||||
import * as api from '@/api/sales/category.js';
|
||||
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||
const state = () => ({
|
||||
code: 'ProductManagement',
|
||||
condition: {
|
||||
orderIs: [],
|
||||
},
|
||||
list: [],
|
||||
total: 0,
|
||||
summary: [],
|
||||
opts: {
|
||||
init: false,
|
||||
category: [],
|
||||
tag: [
|
||||
{
|
||||
label: '爆款',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '推荐',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '特价',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
limit: [
|
||||
{
|
||||
label: '不限购',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '单人单次限购',
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
postage: [
|
||||
{
|
||||
label: '全国包邮，偏远地区除外（青海、西藏、新疆地区）',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const getters = {};
|
||||
const mutations = {
|
||||
setCode: (state, data) => (state.code = data),
|
||||
setCondition: (state, data) => (state.condition = data),
|
||||
setList: (state, data) => (state.list = data),
|
||||
setTotal: (state, data) => (state.total = data),
|
||||
setSummary: (state, data) => (state.summary = data),
|
||||
setOpts: (state, data) => (state.opts = data),
|
||||
};
|
||||
const actions = {
|
||||
search: async ({ state, commit }) => {
|
||||
let data = { ...state.condition };
|
||||
data.productStatus = (data.productStatus || []).join(',');
|
||||
if (data.productStatus === '0') {
|
||||
delete data.productStatus;
|
||||
}
|
||||
let res = await api.search(data);
|
||||
commit('setList', res);
|
||||
if (!res) {
|
||||
ElMessage.error('查询商品列表失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
load: async ({ state, commit }) => {
|
||||
commit('setOpts', {
|
||||
...state.opts,
|
||||
init: true,
|
||||
category: await api.search(),
|
||||
});
|
||||
},
|
||||
detail: async ({ state, dispatch }, id) => {
|
||||
if (!state.list.length) {
|
||||
await dispatch('search');
|
||||
}
|
||||
let res = state.list.find((item) => item.id === id);
|
||||
if (!res) {
|
||||
ElMessage.error('加载详情失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
save: async ({ dispatch }, data) => {
|
||||
let save = data.id ? api.update : api.create;
|
||||
let res = await save(data);
|
||||
if (res) {
|
||||
ElMessage.success('保存成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
sort: async (context, data) => {
|
||||
let res = await api.sort(data);
|
||||
if (res) {
|
||||
ElMessage.success(`移动前序号：${data.oldSort + 1}；移动后序号：${data.currentSort + 1}`);
|
||||
} else {
|
||||
ElMessage.error('保存排序失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
remove: async ({ dispatch }, ids) => {
|
||||
if (!ids.length) {
|
||||
ElMessage.warning('请选择要删除的数据');
|
||||
} else {
|
||||
try {
|
||||
await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
|
||||
let res = await api.remove({ id: ids.join(',') });
|
||||
if (res) {
|
||||
ElMessage.success('删除成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
} catch (e) {
|
||||
console.info('取消删除', e);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
||||
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<el-steps :active="+activeStep" finish-status="success" simple>
|
||||
<el-step v-for="(item, index) in steps" :key="index" :title="index + 1 + '、' + item.label" />
|
||||
</el-steps>
|
||||
<keep-alive>
|
||||
<component :is="'Step' + activeStep" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Step1 from './step1.vue';
|
||||
import Step2 from './step2.vue';
|
||||
export default defineComponent({
|
||||
name: 'ProductForm',
|
||||
components: { Step1, Step2 },
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const activeStep = computed(() => route.params.step || 1);
|
||||
const state = reactive({
|
||||
steps: [{ label: '填写商品信息' }, { label: '填写商品属性' }],
|
||||
});
|
||||
return {
|
||||
activeStep,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.el-steps {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.step-container {
|
||||
flex: 1;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="step-container">
|
||||
<el-scrollbar class="step-content">
|
||||
<el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
|
||||
<el-form-item label="商品分类" prop="category">
|
||||
<el-cascader
|
||||
v-model="form.category"
|
||||
:options="opts.category"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
emitPath: false,
|
||||
}"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="category">
|
||||
<el-input v-model="form.category" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品备注" prop="category">
|
||||
<el-input v-model="form.category" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品上架" prop="category">
|
||||
<el-switch v-model="form.category" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品标签" prop="category">
|
||||
<el-checkbox-group v-model="form.tag" :opts="opts.tag" />
|
||||
</el-form-item>
|
||||
<el-form-item label="限购设置" prop="limit">
|
||||
<el-radio-group v-model="form.limit" :opts="opts.limit" />
|
||||
<el-input-number v-show="form.limit === 1" v-model="form.limitValue" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮费设置" prop="postage">
|
||||
<el-radio-group v-model="form.postage" :opts="opts.postage" />
|
||||
<el-input-number v-show="form.postage === 0" v-model="form.postageValue" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<div class="step-footer">
|
||||
<el-button type="primary" @click="handleSave">下一步、填写商品属性</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default defineComponent({
|
||||
name: 'ProductFormStep1',
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
refsForm: null,
|
||||
currentTab: 'APP',
|
||||
form: {
|
||||
id: '123',
|
||||
limit: 0,
|
||||
limitValue: 0,
|
||||
postage: 0,
|
||||
postageValue: 10,
|
||||
},
|
||||
rules: {},
|
||||
});
|
||||
const opts = computed(() => store.state.product.opts);
|
||||
if (!unref(opts).init) {
|
||||
store.dispatch('product/load');
|
||||
}
|
||||
const handleLoad = async () => {
|
||||
const id = route.params.id;
|
||||
if (id && id !== state.form.id) {
|
||||
let res = await store.dispatch('product/detail', id);
|
||||
Object.assign(state.form, res);
|
||||
}
|
||||
};
|
||||
onActivated(handleLoad);
|
||||
const handleSave = async () => {
|
||||
state.loading = true;
|
||||
try {
|
||||
await state.refsForm.validate();
|
||||
router.push({
|
||||
name: 'UpdateProduct',
|
||||
params: {
|
||||
id: route.params.id || state.form.id,
|
||||
step: 2,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.info('取消保存', e);
|
||||
}
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
opts,
|
||||
handleSave,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.step-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.flex {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-footer {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="step-container">
|
||||
<el-scrollbar class="step-content">
|
||||
<el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
|
||||
<el-form-item label="商品属性" prop="category">设置商品属性</el-form-item>
|
||||
<el-form-item label="商品图片" prop="picture">
|
||||
<el-upload-image v-model="form.picture" config-id="product" :limit="5" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品详情" prop="desc">
|
||||
<el-editor v-model="form.desc" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<div class="step-footer">
|
||||
<el-button type="primary" @click="handleSave">下一步、填写商品属性</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default defineComponent({
|
||||
name: 'ProductFormStep2',
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
refsForm: null,
|
||||
currentTab: 'APP',
|
||||
form: {
|
||||
id: '123',
|
||||
picture: [],
|
||||
desc: null,
|
||||
},
|
||||
rules: {},
|
||||
});
|
||||
const opts = computed(() => store.state.product.opts);
|
||||
if (!unref(opts).init) {
|
||||
store.dispatch('product/load');
|
||||
}
|
||||
const handleLoad = async () => {
|
||||
const id = route.params.id;
|
||||
if (id && id !== state.form.id) {
|
||||
let res = await store.dispatch('product/detail', id);
|
||||
Object.assign(state.form, res);
|
||||
}
|
||||
};
|
||||
onActivated(handleLoad);
|
||||
const handleSave = async () => {
|
||||
state.loading = true;
|
||||
try {
|
||||
await state.refsForm.validate();
|
||||
router.push({
|
||||
name: 'UpdateProduct',
|
||||
params: {
|
||||
id: route.params.id || state.form.id,
|
||||
step: 2,
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
console.info('取消保存', e);
|
||||
}
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
opts,
|
||||
handleSave,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.step-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.flex {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-footer {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<div class="list-container">
|
||||
<ul class="product-status">
|
||||
<li v-for="(item, index) in opts.status" :key="index">
|
||||
<el-button
|
||||
:type="state.condition.productStatus.includes(item.value) ? 'primary' : 'default'"
|
||||
@click="handleStatus(item.value)"
|
||||
>
|
||||
<span>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
<span>(</span>
|
||||
<span class="num">{{ summary[index] || 0 }}</span>
|
||||
<span>)</span>
|
||||
</el-button>
|
||||
</li>
|
||||
</ul>
|
||||
<TableList
|
||||
v-loading="loading"
|
||||
:code="code"
|
||||
:config="config"
|
||||
:data="list"
|
||||
:operation="['search', 'create']"
|
||||
:reset="handleReset"
|
||||
title="商品"
|
||||
:total="total"
|
||||
@create="handleCreate"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #search>
|
||||
<el-form inline>
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="state.condition.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品分类" prop="category">
|
||||
<el-select
|
||||
v-model="state.condition.category"
|
||||
:config="{ label: 'name', value: 'id' }"
|
||||
:opts="opts.category"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="status">
|
||||
<el-select
|
||||
v-model="state.condition.tag"
|
||||
:config="{ label: 'name', value: 'id' }"
|
||||
:opts="opts.tag"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import ElButton from '@/components/extra/ElButton.vue';
|
||||
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const loading = ref(false);
|
||||
const code = computed(() => store.state.product.code);
|
||||
const list = computed(() => _.cloneDeep(store.state.product.list));
|
||||
const total = computed(() => store.state.product.total);
|
||||
const summary = computed(() => store.state.product.summary);
|
||||
const opts = computed(() => store.state.product.opts);
|
||||
if (!unref(opts).init) {
|
||||
store.dispatch('product/load');
|
||||
}
|
||||
|
||||
/* 查询订单 */
|
||||
const state = reactive({
|
||||
condition: {
|
||||
orderNo: null,
|
||||
userPhone: null,
|
||||
orderSource: null,
|
||||
productStatus: [0],
|
||||
dateRange: [],
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
},
|
||||
});
|
||||
watch(
|
||||
() => state.condition,
|
||||
(value) => {
|
||||
store.commit('product/setCondition', _.cloneDeep(value));
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
watch(
|
||||
() => state.condition.productStatus,
|
||||
() => {
|
||||
handleSearch();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
const handleReset = () => {
|
||||
state.condition = {
|
||||
orderNo: null,
|
||||
userPhone: null,
|
||||
orderSource: null,
|
||||
productStatus: [0],
|
||||
dateRange: [],
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
};
|
||||
};
|
||||
const handleStatus = (status) => {
|
||||
let index = state.condition.productStatus.indexOf(status);
|
||||
if (index === -1) {
|
||||
if (status === 0) {
|
||||
state.condition.productStatus = [0];
|
||||
} else {
|
||||
state.condition.productStatus.push(status);
|
||||
state.condition.productStatus = state.condition.productStatus.filter((item) => item > 0);
|
||||
}
|
||||
} else {
|
||||
if (status !== 0) {
|
||||
state.condition.productStatus.splice(index, 1);
|
||||
if (state.condition.productStatus.length) {
|
||||
state.condition.productStatus = state.condition.productStatus.filter((item) => item > 0);
|
||||
} else {
|
||||
state.condition.productStatus = [0];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleSearch = async () => {
|
||||
loading.value = true;
|
||||
await store.dispatch('product/search');
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/* 新增 */
|
||||
const handleCreate = () => {
|
||||
router.push({
|
||||
name: 'CreateProduct',
|
||||
});
|
||||
};
|
||||
|
||||
/* 编辑 */
|
||||
const handleUpdate = (row) => {
|
||||
router.push({
|
||||
name: 'UpdateProduct',
|
||||
params: { id: row.id },
|
||||
});
|
||||
};
|
||||
|
||||
/* 删除 */
|
||||
const handleRemove = (row) => {
|
||||
store.dispatch('product/remove', row.id);
|
||||
};
|
||||
|
||||
/* 查看详情 */
|
||||
const handleDetail = (row) => {
|
||||
router.push({
|
||||
name: 'ProductDetail',
|
||||
params: {
|
||||
id: row.orderId,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/* 商品标签 */
|
||||
const handleTag = (row, tag) => {
|
||||
row[tag] = true;
|
||||
};
|
||||
|
||||
/* SKU */
|
||||
const handleSku = (row) => {
|
||||
console.info(row);
|
||||
};
|
||||
|
||||
/* SKU */
|
||||
const handleEnabled = (row) => {
|
||||
console.info(row);
|
||||
};
|
||||
|
||||
/* 列表配置 */
|
||||
const config = reactive({
|
||||
columns: [
|
||||
{
|
||||
label: '编号',
|
||||
prop: 'id',
|
||||
minWidth: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
label: '商品图片',
|
||||
minWidth: 100,
|
||||
slots: {
|
||||
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '商品名称',
|
||||
prop: 'name',
|
||||
minWidth: 240,
|
||||
},
|
||||
{
|
||||
label: '价格',
|
||||
prop: 'payAmount',
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
label: '标签',
|
||||
width: 160,
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<div>
|
||||
<ElSwitch value={row.hot} onInput={() => handleTag(row, 'hot')} active-text="爆款" />
|
||||
<ElSwitch
|
||||
value={row.recommand}
|
||||
onInput={() => handleTag(row, 'recommand')}
|
||||
active-text="推荐"
|
||||
/>
|
||||
<ElSwitch
|
||||
value={row.special}
|
||||
onInput={() => handleTag(row, 'special')}
|
||||
active-text="特价"
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '排序',
|
||||
width: 120,
|
||||
prop: 'orderSourceDesc',
|
||||
},
|
||||
{
|
||||
label: 'SKU库存',
|
||||
width: 120,
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<ElButton type="text" onClick={() => handleSku(row)}>
|
||||
<ElIcon name="Edit" />
|
||||
</ElButton>
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '上/下架',
|
||||
width: 120,
|
||||
slots: {
|
||||
default: ({ row }) => <ElSwitch value={row.isEnabled} onInput={() => handleEnabled(row)} />,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '销量',
|
||||
prop: 'submitTime',
|
||||
width: 180,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width: 160,
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<div>
|
||||
<ElButton type="text" onClick={() => handleDetail(row)}>
|
||||
查看
|
||||
</ElButton>
|
||||
<ElButton type="text" onClick={() => handleUpdate(row)}>
|
||||
编辑
|
||||
</ElButton>
|
||||
<ElButton type="text" onClick={() => handleRemove(row)}>
|
||||
删除
|
||||
</ElButton>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.list-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.common-list {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.product-status {
|
||||
display: flex;
|
||||
margin-bottom: @layout-space;
|
||||
li {
|
||||
+ li {
|
||||
margin-left: @layout-space;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue