Newer
Older
KaiFengPC / src / views / document / dataClassify / index.vue
@鲁yixuan 鲁yixuan on 14 Aug 4 KB updata
  1. <template>
  2. <div class="dataClassify">
  3. <div class="top">
  4. <el-form ref="ruleForm" inline :model="form">
  5. <el-form-item label="分类名称:" prop="typeName">
  6. <el-input v-model="form.typeName" placeholder="请输入分类名称" />
  7. </el-form-item>
  8. <el-form-item>
  9. <el-button type="primary" icon="Search" @click="search"> 查询</el-button>
  10. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  11. </el-form-item>
  12. </el-form>
  13. <el-row class="mb8">
  14. <el-button type="primary" plain icon="Plus" @click="openDialog({}, 'add')">新增</el-button>
  15. </el-row>
  16. </div>
  17. <el-table :data="tableData" v-loading="loading" :max-height="600" row-key="id">
  18. <!-- <el-table-column type="index" width="55" label="序号" /> -->
  19. <el-table-column label="分类名称" prop="typeName" show-overflow-tooltip />
  20. <el-table-column label="分类编号" prop="typeCode" show-overflow-tooltip />
  21. <el-table-column label="分类描述" prop="remark" show-overflow-tooltip />
  22. <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
  23. <el-table-column label="创建人" prop="createBy" show-overflow-tooltip />
  24. <el-table-column label="文档数" prop="fileNum" show-overflow-tooltip />
  25. <el-table-column label="操作" show-overflow-tooltip width="220">
  26. <template #default="{ row }">
  27. <el-button type="primary" link @click="openDialog(row, 'view')">查看</el-button>
  28. <el-button type="primary" link @click="openDialog(row, 'add')">新增</el-button>
  29. <el-button type="primary" link @click="openDialog(row, 'edit')">修改</el-button>
  30. <el-button type="danger" link @click="del(row)">删除</el-button>
  31. </template>
  32. </el-table-column>
  33. </el-table>
  34.  
  35. <el-dialog v-model="visible" :title="`${opts.text}分类`" :close-on-click-modal="false" width="30%" :before-close="close" class="dialog">
  36. <operate v-if="visible" ref="operateRef" :cur-row="curRow" :opts="opts" @close="close"></operate>
  37. <template #footer v-if="opts.type !== 'view'">
  38. <div class="dialog-footer">
  39. <el-button type="primary" @click="submit">确定</el-button>
  40. <el-button @click="close">取消</el-button>
  41. </div>
  42. </template>
  43. </el-dialog>
  44. </div>
  45. </template>
  46.  
  47. <script setup>
  48. import { reactive, ref, onMounted, shallowRef } from 'vue';
  49. import { optTextMap } from '@/utils/map';
  50. import operate from './operate.vue';
  51. import { documentTypeTree, documentTypeDel } from '@/api/document/dataClassify';
  52. const { proxy } = getCurrentInstance();
  53.  
  54. const form = reactive({
  55. typeName: '',
  56. });
  57. const tableData = ref([]);
  58. const loading = ref(false);
  59. const visible = ref(false);
  60. const curRow = shallowRef({});
  61. const opts = reactive({
  62. type: '',
  63. text: '',
  64. });
  65.  
  66. const getTableList = async () => {
  67. loading.value = true;
  68. try {
  69. const res = await documentTypeTree(form);
  70. loading.value = false;
  71. if (res?.code !== 200) return;
  72. tableData.value = res.data;
  73. } catch (error) {
  74. loading.value = false;
  75. }
  76. };
  77.  
  78. const search = () => {
  79. getTableList();
  80. };
  81.  
  82. const resetQuery = () => {
  83. proxy.$refs.ruleForm.resetFields();
  84. search();
  85. };
  86.  
  87. const openDialog = (data, type) => {
  88. visible.value = true;
  89. opts.type = type;
  90. opts.text = optTextMap.get(type);
  91. curRow.value = data;
  92. };
  93.  
  94. const close = result => {
  95. if (result?.type === 'add') {
  96. search();
  97. } else if (result?.type === 'edit') {
  98. getTableList();
  99. }
  100. visible.value = false;
  101. opts.type = '';
  102. opts.text = '';
  103. curRow.value = {};
  104. };
  105.  
  106. const del = row => {
  107. proxy.$modal
  108. .confirm('是否确认删除?')
  109. .then(async () => {
  110. const res = await documentTypeDel(row.id);
  111. if (res?.code !== 200) return;
  112. getTableList();
  113. })
  114. .catch(() => {});
  115. };
  116.  
  117. const submit = () => {
  118. proxy.$refs.operateRef.submit();
  119. };
  120.  
  121. onMounted(() => {
  122. getTableList();
  123. });
  124. </script>
  125.  
  126. <style lang="scss" scoped>
  127. .dataClassify {
  128. padding: 20px;
  129. height: 90vh;
  130. overflow-y: hidden;
  131. .top {
  132. margin-bottom: 15px;
  133. }
  134. }
  135.  
  136. :deep(.dialog) {
  137. .el-dialog__body {
  138. padding-bottom: 20px !important;
  139. }
  140. .el-dialog__footer {
  141. padding-top: 0 !important;
  142. }
  143. }
  144. </style>