index.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <div class="document-form-container">
  3. <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
  4. <el-form-item label="分类名称" prop="name">
  5. <el-input v-model="formData.name" placeholder="请输入分类名称" />
  6. </el-form-item>
  7. <el-form-item label="上级分类" prop="parent">
  8. <el-tree-select
  9. v-model="formData.parent"
  10. :data="treeData"
  11. :props="{ label: 'name', value: 'id', children: 'children' }"
  12. placeholder="请选择上级分类"
  13. check-strictly
  14. clearable
  15. />
  16. </el-form-item>
  17. <el-form-item label="排序" prop="sort">
  18. <el-input-number v-model="formData.sort" :min="0" :max="999" />
  19. </el-form-item>
  20. <el-form-item label="描述" prop="description">
  21. <el-input v-model="formData.description" type="textarea" rows="4" placeholder="请输入分类描述" />
  22. </el-form-item>
  23. <el-form-item>
  24. <el-button type="primary" @click="handleSubmit">保存</el-button>
  25. <el-button @click="handleCancel">取消</el-button>
  26. </el-form-item>
  27. </el-form>
  28. </div>
  29. </template>
  30. <script lang="ts" setup>
  31. import { ref, reactive, defineProps, defineEmits, onMounted } from 'vue';
  32. import { AddDocumentCategory, UpdateDocumentCategory } from '../../api';
  33. import { successNotification } from '/@/utils/message';
  34. import type { FormInstance } from 'element-plus'
  35. const props = defineProps({
  36. initFormData: {
  37. type: Object,
  38. default: () => ({})
  39. },
  40. cacheData: {
  41. type: Array,
  42. default: () => []
  43. },
  44. treeData: {
  45. type: Array,
  46. default: () => []
  47. }
  48. });
  49. const emit = defineEmits(['drawerClose']);
  50. const formRef = ref<FormInstance | null>(null);
  51. const formData = reactive({
  52. id: '',
  53. name: '',
  54. parent: '',
  55. sort: 0,
  56. description: ''
  57. });
  58. const rules = {
  59. name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
  60. };
  61. // 初始化表单数据
  62. onMounted(() => {
  63. if (props.initFormData && props.initFormData.id) {
  64. Object.assign(formData, props.initFormData);
  65. }
  66. });
  67. // 提交表单
  68. const handleSubmit = async () => {
  69. if (!formRef.value) return;
  70. await formRef.value.validate(async (valid: any) => {
  71. if (valid) {
  72. try {
  73. let res;
  74. if (formData.id) {
  75. // 更新
  76. res = await UpdateDocumentCategory(formData);
  77. } else {
  78. // 新增
  79. res = await AddDocumentCategory(formData);
  80. }
  81. if (res && res.code === 2000) {
  82. successNotification(res.msg || '操作成功');
  83. emit('drawerClose', 'submit');
  84. }
  85. } catch (error) {
  86. console.error('保存文档分类失败:', error);
  87. }
  88. }
  89. });
  90. };
  91. // 取消
  92. const handleCancel = () => {
  93. emit('drawerClose');
  94. };
  95. </script>
  96. <style lang="scss" scoped>
  97. .document-form-container {
  98. padding: 20px;
  99. }
  100. </style>