154 lines
3.4 KiB
Vue
154 lines
3.4 KiB
Vue
<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>
|