向文可
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