|
|
|
|
@ -2,10 +2,10 @@
|
|
|
|
|
<page-view> |
|
|
|
|
<a-row :gutter="12"> |
|
|
|
|
<a-col :lg="8" :md="8" :sm="24" :xl="8" :xs="24" class="pb-3"> |
|
|
|
|
<a-card :bodyStyle="{ padding: '16px' }" :title="title"> |
|
|
|
|
<a-card :bodyStyle="{ padding: '16px' }" :head-style="{ padding: '8px 16px!important' }" :title="title"> |
|
|
|
|
<a-form-model ref="categoryForm" :model="form.model" :rules="form.rules" layout="horizontal"> |
|
|
|
|
<a-form-model-item help="* 页面上所显示的名称" label="名称：" prop="name"> |
|
|
|
|
<a-input v-model="form.model.name" /> |
|
|
|
|
<a-input ref="nameInput" v-model="form.model.name" /> |
|
|
|
|
</a-form-model-item> |
|
|
|
|
<a-form-model-item help="* 一般为单个分类页面的标识，最好为英文" label="别名：" prop="slug"> |
|
|
|
|
<a-input v-model="form.model.slug" /> |
|
|
|
|
@ -53,6 +53,18 @@
|
|
|
|
|
</a-col> |
|
|
|
|
<a-col :lg="16" :md="16" :sm="24" :xl="16" :xs="24" class="pb-3"> |
|
|
|
|
<a-card :bodyStyle="{ padding: '16px' }" title="分类列表"> |
|
|
|
|
<template #extra> |
|
|
|
|
<ReactiveButton |
|
|
|
|
:disabled="list.data.length <= 0" |
|
|
|
|
:errored="formBatch.errored" |
|
|
|
|
:loading="formBatch.saving" |
|
|
|
|
erroredText="保存失败" |
|
|
|
|
loadedText="保存成功" |
|
|
|
|
text="保存" |
|
|
|
|
@callback="formBatch.errored = false" |
|
|
|
|
@click="handleUpdateBatch" |
|
|
|
|
></ReactiveButton> |
|
|
|
|
</template> |
|
|
|
|
<a-spin :spinning="list.loading"> |
|
|
|
|
<CategoryTreeNode |
|
|
|
|
v-model="list.treeData" |
|
|
|
|
@ -100,6 +112,10 @@ export default {
|
|
|
|
|
thumbnail: [{ max: 1023, message: '* 封面图链接的字符长度不能超过 1023', trigger: ['change'] }], |
|
|
|
|
description: [{ max: 100, message: '* 分类描述的字符长度不能超过 100', trigger: ['change'] }] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
formBatch: { |
|
|
|
|
saving: false, |
|
|
|
|
errored: false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -161,6 +177,8 @@ export default {
|
|
|
|
|
try { |
|
|
|
|
const { data } = await apiClient.category.get(category.id) |
|
|
|
|
this.form.model = data |
|
|
|
|
|
|
|
|
|
this.$refs.nameInput.focus() |
|
|
|
|
} catch (e) { |
|
|
|
|
this.$log.error('Failed to get category', e) |
|
|
|
|
} |
|
|
|
|
@ -170,6 +188,7 @@ export default {
|
|
|
|
|
this.form.model = { |
|
|
|
|
parentId: category.id |
|
|
|
|
} |
|
|
|
|
this.$refs.nameInput.focus() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
@ -207,6 +226,34 @@ export default {
|
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
async handleUpdateBatch() { |
|
|
|
|
// tree to flat list |
|
|
|
|
const toFlatList = (data, parentId = 0) => { |
|
|
|
|
if (!data || data.length === 0) return [] |
|
|
|
|
return data.reduce((prev, current, index) => { |
|
|
|
|
current.priority = index + 1 |
|
|
|
|
current.parentId = parentId |
|
|
|
|
const children = current.children.length > 0 ? toFlatList(current.children, current.id) : [] |
|
|
|
|
return [...prev, current, ...children] |
|
|
|
|
}, []) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const categoriesToStage = toFlatList(this.list.treeData) |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
this.formBatch.saving = true |
|
|
|
|
await apiClient.category.updateInBatch(categoriesToStage) |
|
|
|
|
} catch (e) { |
|
|
|
|
this.formBatch.errored = true |
|
|
|
|
this.$log.error('Failed to update categories', e) |
|
|
|
|
} finally { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.formBatch.saving = false |
|
|
|
|
this.handleListCategories() |
|
|
|
|
}, 400) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
handleSavedCallback() { |
|
|
|
|
if (this.form.errored) { |
|
|
|
|
this.form.errored = false |
|
|
|
|
|
Ryan Wang
3 years ago
committed by