向文可
3 years ago
parent
13d294e238
commit
0607c6dbaa
@ -0,0 +1,95 @@
|
|||||||
|
import * as api from '@/api/sales/category.js';
|
||||||
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
|
const state = () => ({
|
||||||
|
code: 'LimitActivity',
|
||||||
|
condition: {},
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
summary: [],
|
||||||
|
opts: {
|
||||||
|
init: false,
|
||||||
|
status: [
|
||||||
|
{ label: '推荐', value: 1 },
|
||||||
|
{ label: '不推荐', value: 2 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
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 res = await api.search(state.condition);
|
||||||
|
commit('setList', res);
|
||||||
|
if (!res) {
|
||||||
|
ElMessage.error('查询商品分类列表失败');
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
load: async ({ commit, state }) => {
|
||||||
|
commit('setOpts', {
|
||||||
|
...state.opts,
|
||||||
|
init: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
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,95 @@
|
|||||||
|
import * as api from '@/api/sales/category.js';
|
||||||
|
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||||
|
const state = () => ({
|
||||||
|
code: 'ProductPicker',
|
||||||
|
condition: {
|
||||||
|
orderIs: [],
|
||||||
|
},
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
summary: [],
|
||||||
|
opts: {
|
||||||
|
init: false,
|
||||||
|
category: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
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 res = await api.search(state.condition);
|
||||||
|
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,141 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<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="status">
|
||||||
|
<el-select v-model="state.condition.status" :opts="opts.status" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
</TableList>
|
||||||
|
<ProductPicker ref="refsPicker" @pick="handlePick" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||||
|
import ProductPicker from '@/views/sales/product/picker.vue';
|
||||||
|
const store = useStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const code = computed(() => store.state.recommandActivity.code);
|
||||||
|
const list = computed(() => store.state.recommandActivity.list);
|
||||||
|
const total = computed(() => store.state.recommandActivity.total);
|
||||||
|
const opts = computed(() => store.state.recommandActivity.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('recommandActivity/load');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表查询 */
|
||||||
|
const state = reactive({
|
||||||
|
condition: {
|
||||||
|
name: null,
|
||||||
|
status: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('recommandActivity/setCondition', _.cloneDeep(value));
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
const handleReset = () => {
|
||||||
|
state.condition = {
|
||||||
|
name: null,
|
||||||
|
status: null,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('recommandActivity/search');
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const refsPicker = ref(null);
|
||||||
|
// 添加/编辑
|
||||||
|
const handleCreate = () => {
|
||||||
|
unref(refsPicker).show();
|
||||||
|
};
|
||||||
|
// 保存
|
||||||
|
const handlePick = async (rows) => {
|
||||||
|
console.info(rows);
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 操作 */
|
||||||
|
// 上下架
|
||||||
|
const handleEnable = (row, value) => {
|
||||||
|
row.enabled = value;
|
||||||
|
};
|
||||||
|
// 删除
|
||||||
|
const handleRemove = async (rows) => {
|
||||||
|
await store.dispatch(
|
||||||
|
'recommandActivity/remove',
|
||||||
|
rows.map((item) => item.id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 列表配置 */
|
||||||
|
const config = reactive({
|
||||||
|
page: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
label: '编号',
|
||||||
|
prop: 'id',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品图片',
|
||||||
|
minWidth: 100,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品名称',
|
||||||
|
prop: 'name',
|
||||||
|
minWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '是否推荐',
|
||||||
|
width: 120,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<ElSwitch value={row.isEnable} onChange={(visible) => handleEnable(row, visible)} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 300,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div>
|
||||||
|
<ElButton type="text" onClick={() => handleRemove([row])}>
|
||||||
|
移除
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog v-model="visible" title="选择商品">
|
||||||
|
<TableList
|
||||||
|
ref="refsTable"
|
||||||
|
v-loading="loading"
|
||||||
|
:code="code"
|
||||||
|
:config="config"
|
||||||
|
:data="list"
|
||||||
|
:operation="['search']"
|
||||||
|
:reset="handleReset"
|
||||||
|
:total="total"
|
||||||
|
@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>
|
||||||
|
</template>
|
||||||
|
</TableList>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="handleClose">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handlePick">确认选择</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
const emits = defineEmits(['pick']);
|
||||||
|
const store = useStore();
|
||||||
|
const loading = ref(false);
|
||||||
|
const visible = ref(false);
|
||||||
|
const refsTable = ref(null);
|
||||||
|
const code = computed(() => store.state.productPicker.code);
|
||||||
|
const list = computed(() => store.state.productPicker.list);
|
||||||
|
const total = computed(() => store.state.productPicker.total);
|
||||||
|
const opts = computed(() => store.state.productPicker.opts);
|
||||||
|
if (!unref(opts).init) {
|
||||||
|
store.dispatch('productPicker/load');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表查询 */
|
||||||
|
const state = reactive({
|
||||||
|
condition: {
|
||||||
|
name: null,
|
||||||
|
category: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('productPicker/setCondition', _.cloneDeep(value));
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
const handleReset = () => {
|
||||||
|
state.condition = {
|
||||||
|
name: null,
|
||||||
|
category: null,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('productPicker/search');
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 操作 */
|
||||||
|
// 显示
|
||||||
|
const handleShow = () => {
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
// 取消
|
||||||
|
const handleClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
// 确定
|
||||||
|
const handlePick = async () => {
|
||||||
|
emits('pick', [...unref(refsTable).selection]);
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
show: handleShow,
|
||||||
|
close: handleClose,
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 列表配置 */
|
||||||
|
const config = reactive({
|
||||||
|
page: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
type: 'selection',
|
||||||
|
width: 60,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '编号',
|
||||||
|
prop: 'id',
|
||||||
|
width: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品图片',
|
||||||
|
minWidth: 100,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品名称',
|
||||||
|
prop: 'name',
|
||||||
|
minWidth: 160,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '商品价格',
|
||||||
|
prop: 'price',
|
||||||
|
minWidth: 160,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.common-list {
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue