向文可
3 years ago
parent
02eabb7b2a
commit
3007f5fdf2
@ -0,0 +1,254 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-container">
|
||||||
|
<table-list
|
||||||
|
ref="refsTable"
|
||||||
|
v-loading="loading"
|
||||||
|
:code="code"
|
||||||
|
:config="config"
|
||||||
|
:data="list"
|
||||||
|
:operation="['create']"
|
||||||
|
sortable
|
||||||
|
title="分类"
|
||||||
|
:total="total"
|
||||||
|
@create="handleCreate()"
|
||||||
|
@row-click="handleExpand"
|
||||||
|
@row-sort="handleSort"
|
||||||
|
/>
|
||||||
|
<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="sourceId">
|
||||||
|
<el-cascader
|
||||||
|
v-model="formState.form.sourceId"
|
||||||
|
:options="list"
|
||||||
|
:props="{
|
||||||
|
checkStrictly: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
children: 'childList',
|
||||||
|
emitPath: false,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="目标分类" prop="targetId">
|
||||||
|
<el-cascader
|
||||||
|
v-model="formState.form.targetId"
|
||||||
|
:options="list"
|
||||||
|
:props="{
|
||||||
|
checkStrictly: true,
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
children: 'childList',
|
||||||
|
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>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import ElButton from '@/components/extra/ElButton.vue';
|
||||||
|
import ElImage from '@/components/extra/ElImage.vue';
|
||||||
|
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||||
|
import TableList from '@/components/TableList.vue';
|
||||||
|
const router = useRouter();
|
||||||
|
const store = useStore();
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const loading = ref(false);
|
||||||
|
const refsTable = ref(null);
|
||||||
|
const code = computed(() => store.state.category.code);
|
||||||
|
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) {
|
||||||
|
store.dispatch('category/load');
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询订单 */
|
||||||
|
const state = reactive({
|
||||||
|
condition: {},
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => state.condition,
|
||||||
|
(value) => {
|
||||||
|
store.commit('category/setCondition', _.cloneDeep(value));
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
const handleSearch = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('category/search');
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
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 = async (row) => {
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('category/save', row);
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
const handleRemove = async (rows) => {
|
||||||
|
await store.dispatch(
|
||||||
|
'category/remove',
|
||||||
|
rows.map((item) => item.id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const handleSort = async (newSort, oldSort, e, arr) => {
|
||||||
|
arr = arr || unref(list);
|
||||||
|
let direction = (oldSort - newSort) / Math.abs(oldSort - newSort);
|
||||||
|
let currentSort = arr[newSort].sort;
|
||||||
|
oldSort = arr[newSort + direction].sort;
|
||||||
|
loading.value = true;
|
||||||
|
await store.dispatch('category/sort', { id: arr[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: {
|
||||||
|
sourceId: [{ required: true, message: '源分类不能为空' }],
|
||||||
|
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 proxy.$validate(refsForm);
|
||||||
|
let data = _.cloneDeep(formState.form);
|
||||||
|
await store.dispatch('category/transform', data);
|
||||||
|
formState.formVisible = false;
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消保存', e);
|
||||||
|
}
|
||||||
|
formState.submitting = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 列表配置 */
|
||||||
|
const handleConfig = (parent) => {
|
||||||
|
let res = reactive({
|
||||||
|
setting: !parent,
|
||||||
|
page: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
label: '分类名称',
|
||||||
|
prop: 'name',
|
||||||
|
minWidth: 300,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '图片',
|
||||||
|
minWidth: 300,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="64px" />,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '是否显示',
|
||||||
|
width: 120,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<ElSwitch v-model={row.isEnable} onChange={(visible) => handleVisible(row, visible)} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '操作',
|
||||||
|
width: 300,
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => (
|
||||||
|
<div>
|
||||||
|
{!parent ? (
|
||||||
|
<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 }) => (
|
||||||
|
<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>
|
||||||
|
:deep(.el-table__expanded-cell) {
|
||||||
|
.common-list {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue