123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <template>
- <div class="document-form-container">
- <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
- <el-form-item label="分类名称" prop="name">
- <el-input v-model="formData.name" placeholder="请输入分类名称" />
- </el-form-item>
-
- <el-form-item label="上级分类" prop="parent">
- <el-tree-select
- v-model="formData.parent"
- :data="treeData"
- :props="{ label: 'name', value: 'id', children: 'children' }"
- placeholder="请选择上级分类"
- check-strictly
- clearable
- />
- </el-form-item>
-
- <el-form-item label="排序" prop="sort">
- <el-input-number v-model="formData.sort" :min="0" :max="999" />
- </el-form-item>
-
- <el-form-item label="描述" prop="description">
- <el-input v-model="formData.description" type="textarea" rows="4" placeholder="请输入分类描述" />
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="handleSubmit">保存</el-button>
- <el-button @click="handleCancel">取消</el-button>
- </el-form-item>
- </el-form>
- </div>
- </template>
- <script lang="ts" setup>
- import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
- import { AddDocumentCategory, UpdateDocumentCategory } from '../../api';
- import { successNotification } from '/@/utils/message';
- import type { FormInstance } from 'element-plus'
- const props = defineProps({
- initFormData: {
- type: Object,
- default: () => ({})
- },
- cacheData: {
- type: Array,
- default: () => []
- },
- treeData: {
- type: Array,
- default: () => []
- }
- });
- const emit = defineEmits(['drawerClose']);
- const formRef = ref<FormInstance | null>(null);
- const formData = reactive({
- id: '',
- name: '',
- parent: '',
- sort: 0,
- description: ''
- });
- const rules = {
- name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
- };
- // 初始化表单数据
- onMounted(() => {
- if (props.initFormData && props.initFormData.id) {
- Object.assign(formData, props.initFormData);
- }
- });
- // 提交表单
- const handleSubmit = async () => {
- if (!formRef.value) return;
-
- await formRef.value.validate(async (valid: any) => {
- if (valid) {
- try {
- let res;
- if (formData.id) {
- // 更新
- res = await UpdateDocumentCategory(formData);
- } else {
- // 新增
- res = await AddDocumentCategory(formData);
- }
-
- if (res && res.code === 2000) {
- successNotification(res.msg || '操作成功');
- emit('drawerClose', 'submit');
- }
- } catch (error) {
- console.error('保存文档分类失败:', error);
- }
- }
- });
- };
- // 取消
- const handleCancel = () => {
- emit('drawerClose');
- };
- </script>
- <style lang="scss" scoped>
- .document-form-container {
- padding: 20px;
- }
- </style>
|