|
|
|
|
@ -1,38 +1,53 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="list-container">
|
|
|
|
|
<TableList
|
|
|
|
|
ref="refsTable"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
:code="code"
|
|
|
|
|
:config="config"
|
|
|
|
|
:data="list"
|
|
|
|
|
:operation="['search', 'create']"
|
|
|
|
|
:reset="handleReset"
|
|
|
|
|
:operation="['create']"
|
|
|
|
|
sortable
|
|
|
|
|
title="分类"
|
|
|
|
|
:total="total"
|
|
|
|
|
@create="handleCreate"
|
|
|
|
|
@create="handleCreate()"
|
|
|
|
|
@row-click="handleExpand"
|
|
|
|
|
@row-sort="handleSort"
|
|
|
|
|
@search="handleSearch"
|
|
|
|
|
>
|
|
|
|
|
<template #search>
|
|
|
|
|
<el-form inline>
|
|
|
|
|
<el-form-item label="是否显示" prop="visible">
|
|
|
|
|
<el-select v-model="state.condition.visible" :opts="opts.visible" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
/>
|
|
|
|
|
<el-dialog v-model="formState.formVisible" title="转移商品" width="360px">
|
|
|
|
|
<el-form ref="refsForm" label-width="100px" :model="formState.form" :rules="formState.rules">
|
|
|
|
|
<el-form-item label="目标分类" prop="targetId">
|
|
|
|
|
<el-cascader
|
|
|
|
|
v-model="formState.form.targetId"
|
|
|
|
|
:options="list"
|
|
|
|
|
:props="{
|
|
|
|
|
label: 'name',
|
|
|
|
|
value: 'id',
|
|
|
|
|
children: 'childList',
|
|
|
|
|
trigger: 'hover',
|
|
|
|
|
emitPath: false,
|
|
|
|
|
}"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<el-button @click="formState.formVisible = false">取消</el-button>
|
|
|
|
|
<el-button :loading="formState.submitting" type="primary" @click="handleSave">保存</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</TableList>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="jsx">
|
|
|
|
|
import ElButton from '@/components/extra/ElButton.vue';
|
|
|
|
|
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
|
|
|
|
import TableList from '@/components/TableList.vue';
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const store = useStore();
|
|
|
|
|
const loading = ref(false);
|
|
|
|
|
const refsTable = ref(null);
|
|
|
|
|
const code = computed(() => store.state.category.code);
|
|
|
|
|
const list = computed(() => store.state.category.list);
|
|
|
|
|
const list = computed(() => _.cloneDeep(store.state.category.list));
|
|
|
|
|
const total = computed(() => store.state.category.total);
|
|
|
|
|
const opts = computed(() => store.state.category.opts);
|
|
|
|
|
if (!unref(opts).init) {
|
|
|
|
|
@ -41,9 +56,7 @@
|
|
|
|
|
|
|
|
|
|
/* 查询订单 */
|
|
|
|
|
const state = reactive({
|
|
|
|
|
condition: {
|
|
|
|
|
visible: null,
|
|
|
|
|
},
|
|
|
|
|
condition: {},
|
|
|
|
|
});
|
|
|
|
|
watch(
|
|
|
|
|
() => state.condition,
|
|
|
|
|
@ -52,24 +65,22 @@
|
|
|
|
|
},
|
|
|
|
|
{ immediate: true, deep: true }
|
|
|
|
|
);
|
|
|
|
|
const handleReset = () => {
|
|
|
|
|
state.condition = {
|
|
|
|
|
visible: null,
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
const handleSearch = async () => {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
await store.dispatch('category/search');
|
|
|
|
|
loading.value = false;
|
|
|
|
|
};
|
|
|
|
|
const handleCreate = () => {
|
|
|
|
|
router.push({ name: 'CreateCategory' });
|
|
|
|
|
onActivated(handleSearch);
|
|
|
|
|
const handleCreate = (row) => {
|
|
|
|
|
router.push({ name: 'CreateCategory', query: { pid: row?.id } });
|
|
|
|
|
};
|
|
|
|
|
const handleUpdate = (row) => {
|
|
|
|
|
router.push({ name: 'UpdateCategory', params: { id: row.id } });
|
|
|
|
|
};
|
|
|
|
|
const handleVisible = (row) => {
|
|
|
|
|
router.push({ name: 'UpdateCategory', params: { id: row.id } });
|
|
|
|
|
const handleVisible = async (row) => {
|
|
|
|
|
loading.value = true;
|
|
|
|
|
await store.dispatch('category/save', row);
|
|
|
|
|
loading.value = false;
|
|
|
|
|
};
|
|
|
|
|
const handleRemove = async (rows) => {
|
|
|
|
|
await store.dispatch(
|
|
|
|
|
@ -77,80 +88,144 @@
|
|
|
|
|
rows.map((item) => item.id)
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
const handleSort = async (currentSort, oldSort) => {
|
|
|
|
|
const handleSort = async (newSort, oldSort, e, list) => {
|
|
|
|
|
list = list || unref(list);
|
|
|
|
|
let direction = (oldSort - newSort) / Math.abs(oldSort - newSort);
|
|
|
|
|
let currentSort = list[newSort].sort;
|
|
|
|
|
oldSort = list[newSort + direction].sort;
|
|
|
|
|
loading.value = true;
|
|
|
|
|
await store.dispatch('category/sort', { id: unref(list)[currentSort].id, currentSort, oldSort });
|
|
|
|
|
await store.dispatch('category/sort', { id: list[newSort].id, currentSort, oldSort });
|
|
|
|
|
loading.value = false;
|
|
|
|
|
};
|
|
|
|
|
const handleExpand = (row) => {
|
|
|
|
|
unref(list).forEach((item) => {
|
|
|
|
|
unref(refsTable).toggleRowExpansion(item, false);
|
|
|
|
|
});
|
|
|
|
|
unref(refsTable).toggleRowExpansion(row);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/* 表单 */
|
|
|
|
|
const refsForm = ref(null);
|
|
|
|
|
const formState = reactive({
|
|
|
|
|
formVisible: false,
|
|
|
|
|
submitting: false,
|
|
|
|
|
form: {
|
|
|
|
|
sourceId: null,
|
|
|
|
|
targetId: false,
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
targetId: [{ required: true, message: '目标分类不能为空' }],
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
// 转移商品
|
|
|
|
|
const handleTransform = (row) => {
|
|
|
|
|
formState.form = {
|
|
|
|
|
sourceId: row.id,
|
|
|
|
|
targetId: null,
|
|
|
|
|
};
|
|
|
|
|
formState.formVisible = true;
|
|
|
|
|
};
|
|
|
|
|
const handleSave = async () => {
|
|
|
|
|
formState.submitting = true;
|
|
|
|
|
try {
|
|
|
|
|
await unref(refsForm).validate();
|
|
|
|
|
let data = _.cloneDeep(formState.form);
|
|
|
|
|
await store.dispatch('category/transform', data);
|
|
|
|
|
formState.formVisible = false;
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.info('取消保存', e);
|
|
|
|
|
}
|
|
|
|
|
formState.submitting = false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/* 列表配置 */
|
|
|
|
|
const config = reactive({
|
|
|
|
|
page: false,
|
|
|
|
|
columns: [
|
|
|
|
|
{
|
|
|
|
|
label: '分类名称',
|
|
|
|
|
prop: 'name',
|
|
|
|
|
minWidth: 300,
|
|
|
|
|
fixed: 'left',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '图片',
|
|
|
|
|
minWidth: 300,
|
|
|
|
|
slots: {
|
|
|
|
|
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
|
|
|
|
|
const handleConfig = (parent) => {
|
|
|
|
|
let res = reactive({
|
|
|
|
|
setting: !parent,
|
|
|
|
|
page: false,
|
|
|
|
|
columns: [
|
|
|
|
|
{
|
|
|
|
|
label: '分类名称',
|
|
|
|
|
prop: 'name',
|
|
|
|
|
minWidth: 300,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '是否显示',
|
|
|
|
|
width: 120,
|
|
|
|
|
slots: {
|
|
|
|
|
default: ({ row }) => (
|
|
|
|
|
<ElSwitch value={row.isEnable} onChange={(visible) => handleVisible(row, visible)} />
|
|
|
|
|
),
|
|
|
|
|
{
|
|
|
|
|
label: '图片',
|
|
|
|
|
minWidth: 300,
|
|
|
|
|
slots: {
|
|
|
|
|
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="64px" />,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '操作',
|
|
|
|
|
fixed: 'right',
|
|
|
|
|
width: 300,
|
|
|
|
|
{
|
|
|
|
|
label: '是否显示',
|
|
|
|
|
width: 120,
|
|
|
|
|
slots: {
|
|
|
|
|
default: ({ row }) => (
|
|
|
|
|
<ElSwitch v-model={row.isEnable} onChange={(visible) => handleVisible(row, visible)} />
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '操作',
|
|
|
|
|
width: 300,
|
|
|
|
|
slots: {
|
|
|
|
|
default: ({ row }) => (
|
|
|
|
|
<div>
|
|
|
|
|
<ElButton type="text" onClick={() => handleCreate(row)}>
|
|
|
|
|
新增下级
|
|
|
|
|
</ElButton>
|
|
|
|
|
<ElButton type="text" onClick={() => handleTransform(row)}>
|
|
|
|
|
转移商品
|
|
|
|
|
</ElButton>
|
|
|
|
|
<ElButton type="text" onClick={() => handleUpdate(row)}>
|
|
|
|
|
编辑
|
|
|
|
|
</ElButton>
|
|
|
|
|
<ElButton type="text" onClick={() => handleRemove([row])}>
|
|
|
|
|
删除
|
|
|
|
|
</ElButton>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
if (!parent) {
|
|
|
|
|
res.columns.unshift({
|
|
|
|
|
type: 'expand',
|
|
|
|
|
width: 60,
|
|
|
|
|
slots: {
|
|
|
|
|
default: ({ row }) => (
|
|
|
|
|
<div>
|
|
|
|
|
<ElButton type="text" onClick={() => handleCreate(row)}>
|
|
|
|
|
新增下级
|
|
|
|
|
</ElButton>
|
|
|
|
|
<ElButton type="text" onClick={() => handleCreate(row)}>
|
|
|
|
|
转移商品
|
|
|
|
|
</ElButton>
|
|
|
|
|
<ElButton type="text" onClick={() => handleUpdate(row)}>
|
|
|
|
|
编辑
|
|
|
|
|
</ElButton>
|
|
|
|
|
<ElButton type="text" onClick={() => handleRemove([row])}>
|
|
|
|
|
删除
|
|
|
|
|
</ElButton>
|
|
|
|
|
</div>
|
|
|
|
|
<TableList
|
|
|
|
|
code={Date.now() + ''}
|
|
|
|
|
config={handleConfig(row)}
|
|
|
|
|
data={row.childList || []}
|
|
|
|
|
operation={[]}
|
|
|
|
|
sortable
|
|
|
|
|
onRowSort={(newSort, oldSort, e) => handleSort(newSort, oldSort, e, row.childList)}
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
res.columns.unshift({
|
|
|
|
|
type: 'index',
|
|
|
|
|
width: 60,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return res;
|
|
|
|
|
};
|
|
|
|
|
const config = handleConfig(null);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.list-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
:deep(.el-table__expanded-cell) {
|
|
|
|
|
.common-list {
|
|
|
|
|
flex-shrink: 1;
|
|
|
|
|
}
|
|
|
|
|
.order-status {
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 300px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-bottom: @layout-space;
|
|
|
|
|
li {
|
|
|
|
|
+ li {
|
|
|
|
|
margin-left: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
向文可
2 years ago