完善页面6
This commit is contained in:
225
components/ArticleFormDrawer.vue
Normal file
225
components/ArticleFormDrawer.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<uni-drawer ref="drawerRef" mode="right" :width="600">
|
||||
<view class="drawer-content">
|
||||
<view class="drawer-header">
|
||||
<text class="title">{{ isEdit ? "编辑文章" : "添加文章" }}</text>
|
||||
<uni-icons type="closeempty" size="24" @click="close"></uni-icons>
|
||||
</view>
|
||||
<scroll-view scroll-y class="drawer-body">
|
||||
<uni-forms
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<uni-forms-item label="文章标题" name="title" required>
|
||||
<uni-easyinput
|
||||
v-model="formData.title"
|
||||
placeholder="请输入文章标题"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="文章分类" name="categoryId" required>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="categoryList"
|
||||
range-key="name"
|
||||
@change="onCategoryChange"
|
||||
:value="categoryIndex"
|
||||
>
|
||||
<view
|
||||
class="picker-view"
|
||||
style="
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
{{
|
||||
formData.categoryId
|
||||
? getCategoryName(formData.categoryId)
|
||||
: "请选择文章分类"
|
||||
}}
|
||||
</view>
|
||||
</picker>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="文章摘要" name="summary">
|
||||
<uni-easyinput
|
||||
type="textarea"
|
||||
v-model="formData.summary"
|
||||
placeholder="请输入文章摘要"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="文章封面" name="cover">
|
||||
<uni-easyinput
|
||||
v-model="formData.cover"
|
||||
placeholder="请输入封面图片URL"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="文章内容" name="content" required>
|
||||
<view
|
||||
class="editor-container"
|
||||
style="
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
min-height: 300px;
|
||||
"
|
||||
>
|
||||
<richtext-editor
|
||||
v-model="formData.content"
|
||||
placeholder="请输入文章内容..."
|
||||
></richtext-editor>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</scroll-view>
|
||||
<view class="drawer-footer">
|
||||
<button class="btn-cancel" @click="close">取消</button>
|
||||
<button
|
||||
class="btn-confirm"
|
||||
type="primary"
|
||||
@click="submit"
|
||||
:loading="loading"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from "vue";
|
||||
import { api } from "@/services/api.js";
|
||||
import mockStore from "@/stores/useMockData.js";
|
||||
|
||||
const emit = defineEmits(["success"]);
|
||||
const drawerRef = ref(null);
|
||||
const formRef = ref(null);
|
||||
const isEdit = ref(false);
|
||||
const loading = ref(false);
|
||||
const editId = ref(null);
|
||||
|
||||
const categoryList = computed(() => mockStore.mockCategories);
|
||||
|
||||
const formData = reactive({
|
||||
title: "",
|
||||
categoryId: "",
|
||||
summary: "",
|
||||
cover: "",
|
||||
content: "",
|
||||
});
|
||||
|
||||
const categoryIndex = computed(() => {
|
||||
if (!formData.categoryId) return -1;
|
||||
return categoryList.value.findIndex((c) => c.id === formData.categoryId);
|
||||
});
|
||||
|
||||
const getCategoryName = (id) => {
|
||||
const category = categoryList.value.find((c) => c.id === id);
|
||||
return category ? category.name : "请选择文章分类";
|
||||
};
|
||||
|
||||
const onCategoryChange = (e) => {
|
||||
const index = e.detail.value;
|
||||
formData.categoryId = categoryList.value[index].id;
|
||||
};
|
||||
|
||||
const rules = {
|
||||
title: {
|
||||
rules: [{ required: true, errorMessage: "请输入文章标题" }],
|
||||
},
|
||||
categoryId: {
|
||||
rules: [{ required: true, errorMessage: "请选择文章分类" }],
|
||||
},
|
||||
content: {
|
||||
rules: [{ required: true, errorMessage: "请输入文章内容" }],
|
||||
},
|
||||
};
|
||||
|
||||
const open = (row) => {
|
||||
if (row) {
|
||||
isEdit.value = true;
|
||||
editId.value = row.id;
|
||||
Object.assign(formData, {
|
||||
title: row.title,
|
||||
categoryId: row.categoryId,
|
||||
summary: row.summary,
|
||||
cover: row.cover,
|
||||
content: row.content,
|
||||
});
|
||||
} else {
|
||||
isEdit.value = false;
|
||||
editId.value = null;
|
||||
Object.assign(formData, {
|
||||
title: "",
|
||||
categoryId: "",
|
||||
summary: "",
|
||||
cover: "",
|
||||
content: "",
|
||||
});
|
||||
}
|
||||
drawerRef.value.open();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
drawerRef.value.close();
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
loading.value = true;
|
||||
if (isEdit.value) {
|
||||
await api.updateArticle(editId.value, formData);
|
||||
} else {
|
||||
await api.addArticle(formData);
|
||||
}
|
||||
uni.showToast({ title: "保存成功", icon: "success" });
|
||||
emit("success");
|
||||
close();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.drawer-header .title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.drawer-body {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
}
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.drawer-footer button {
|
||||
margin-left: 10px;
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
153
components/CategoryFormDrawer.vue
Normal file
153
components/CategoryFormDrawer.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<uni-drawer ref="drawerRef" mode="right" :width="400">
|
||||
<view class="drawer-content">
|
||||
<view class="drawer-header">
|
||||
<text class="title">{{ isEdit ? "编辑分类" : "添加分类" }}</text>
|
||||
<uni-icons type="closeempty" size="24" @click="close"></uni-icons>
|
||||
</view>
|
||||
<scroll-view scroll-y class="drawer-body">
|
||||
<uni-forms
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<uni-forms-item label="分类名称" name="name" required>
|
||||
<uni-easyinput
|
||||
v-model="formData.name"
|
||||
placeholder="请输入分类名称"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="排序" name="sort">
|
||||
<uni-easyinput
|
||||
type="number"
|
||||
v-model="formData.sort"
|
||||
placeholder="请输入排序"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="状态" name="status">
|
||||
<switch
|
||||
:checked="formData.status === 1"
|
||||
@change="(e) => (formData.status = e.detail.value ? 1 : 0)"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</scroll-view>
|
||||
<view class="drawer-footer">
|
||||
<button class="btn-cancel" @click="close">取消</button>
|
||||
<button
|
||||
class="btn-confirm"
|
||||
type="primary"
|
||||
@click="submit"
|
||||
:loading="loading"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { api } from "@/services/api.js";
|
||||
|
||||
const emit = defineEmits(["success"]);
|
||||
const drawerRef = ref(null);
|
||||
const formRef = ref(null);
|
||||
const isEdit = ref(false);
|
||||
const loading = ref(false);
|
||||
const editId = ref(null);
|
||||
|
||||
const formData = reactive({
|
||||
name: "",
|
||||
sort: 0,
|
||||
status: 1,
|
||||
});
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [{ required: true, errorMessage: "请输入分类名称" }],
|
||||
},
|
||||
};
|
||||
|
||||
const open = (row) => {
|
||||
if (row) {
|
||||
isEdit.value = true;
|
||||
editId.value = row.id;
|
||||
Object.assign(formData, {
|
||||
name: row.name,
|
||||
sort: row.sort,
|
||||
status: row.status,
|
||||
});
|
||||
} else {
|
||||
isEdit.value = false;
|
||||
editId.value = null;
|
||||
Object.assign(formData, {
|
||||
name: "",
|
||||
sort: 0,
|
||||
status: 1,
|
||||
});
|
||||
}
|
||||
drawerRef.value.open();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
drawerRef.value.close();
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
loading.value = true;
|
||||
if (isEdit.value) {
|
||||
await api.updateCategory(editId.value, formData);
|
||||
} else {
|
||||
await api.addCategory(formData);
|
||||
}
|
||||
uni.showToast({ title: "保存成功", icon: "success" });
|
||||
emit("success");
|
||||
close();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drawer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.drawer-header .title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.drawer-body {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
}
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 15px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.drawer-footer button {
|
||||
margin-left: 10px;
|
||||
min-width: 80px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user