useEditorConfig.ts 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. import { computed, ref } from 'vue';
  2. import { message, Modal } from 'ant-design-vue';
  3. import { ObjectUtils } from '@imengyu/imengyu-utils';
  4. import type { IHomeCommonCategoryDefine } from '../../CommonCategoryDefine';
  5. import DefaultEditorJson from '../../DefaultCategory.json';
  6. import CommonCategoryApi, { type ICommonCategoryConfigItem } from '../../api/CommonCategoryApi';
  7. /** 历史版本列表项(接口返回的 items 元素) */
  8. export interface IHistoryListItem {
  9. id?: number;
  10. data?: IHomeCommonCategoryDefine;
  11. createTime?: string;
  12. name?: string;
  13. [key: string]: any;
  14. }
  15. export function useEditorConfig() {
  16. const currentEditorJson = ref<IHomeCommonCategoryDefine>(DefaultEditorJson as IHomeCommonCategoryDefine);
  17. const selectedPage = ref<(IHomeCommonCategoryDefine['page'][0]) | null>(null);
  18. const historyList = ref<IHistoryListItem[]>([]);
  19. const currentConfig = ref<ICommonCategoryConfigItem>();
  20. const currentHistoryId = ref<number>(0);
  21. const currentShowConfigName = computed(() => {
  22. if (currentHistoryId.value === 0) return '默认配置';
  23. return historyList.value.find(item => item.id === currentHistoryId.value)?.name ?? '未知';
  24. });
  25. // 另存为弹窗
  26. const saveAsModalVisible = ref(false);
  27. const saveAsVersionName = ref('');
  28. const saveAsLoading = ref(false);
  29. async function loadEditorJson(selectDefault = false) {
  30. try {
  31. currentConfig.value = await CommonCategoryApi.getConfigWithoutCache();
  32. if (!currentConfig.value) throw new Error('加载基础配置失败');
  33. if (selectDefault) currentHistoryId.value = currentConfig.value.activeHistoryId;
  34. if (currentHistoryId.value > 0) {
  35. const activeHistory = historyList.value.find(item => item.id === currentHistoryId.value);
  36. if (activeHistory) {
  37. currentEditorJson.value = ObjectUtils.clone(activeHistory.data!) as IHomeCommonCategoryDefine;
  38. } else {
  39. throw new Error('当前激活的历史版本不存在');
  40. }
  41. } else {
  42. currentEditorJson.value = ObjectUtils.clone(currentConfig.value.data) as IHomeCommonCategoryDefine;
  43. }
  44. message.success('加载分类成功');
  45. } catch (error) {
  46. Modal.error({
  47. title: '加载分类失败',
  48. content: '' + error,
  49. });
  50. }
  51. }
  52. async function loadEditorJsonHistorys() {
  53. try {
  54. const res = await CommonCategoryApi.getConfigHistoryList(1, 10);
  55. const items = res?.items ?? [];
  56. historyList.value = Array.isArray(items) ? items : [];
  57. } catch (error) {
  58. historyList.value = [];
  59. Modal.error({
  60. title: '加载历史版本列表失败',
  61. content: '' + error,
  62. });
  63. }
  64. }
  65. function onSelectDefault() {
  66. currentHistoryId.value = 0;
  67. loadEditorJson(true);
  68. }
  69. function onSelectHistory(id: number) {
  70. currentHistoryId.value = id;
  71. loadEditorJson(false);
  72. }
  73. async function saveEditorJson() {
  74. try {
  75. const saveToHistoryId = currentHistoryId.value === 0 ? undefined : currentHistoryId.value;
  76. await CommonCategoryApi.editConfig(
  77. currentEditorJson.value,
  78. undefined,
  79. saveToHistoryId
  80. );
  81. message.success('保存成功');
  82. } catch (error) {
  83. Modal.error({
  84. title: '保存失败',
  85. content: '' + error,
  86. });
  87. }
  88. }
  89. function openSaveAsModal() {
  90. saveAsVersionName.value = '';
  91. saveAsModalVisible.value = true;
  92. }
  93. async function confirmSaveAs() {
  94. const name = saveAsVersionName.value?.trim();
  95. if (!name) {
  96. message.warning('请输入版本名称');
  97. return;
  98. }
  99. saveAsLoading.value = true;
  100. try {
  101. await CommonCategoryApi.editConfig(currentEditorJson.value, name, 0);
  102. message.success('已另存为历史版本');
  103. saveAsModalVisible.value = false;
  104. await loadEditorJsonHistorys();
  105. } catch (error) {
  106. Modal.error({
  107. title: '另存为失败',
  108. content: '' + error,
  109. });
  110. } finally {
  111. saveAsLoading.value = false;
  112. }
  113. }
  114. async function setActiveHistory() {
  115. await CommonCategoryApi.setActiveConfigHistory(currentHistoryId.value);
  116. message.success('设置为激活版本成功');
  117. }
  118. function deleteHistory() {
  119. Modal.confirm({
  120. title: '删除历史版本',
  121. content: '确定要删除该历史版本吗?',
  122. onOk: async () => {
  123. await CommonCategoryApi.deleteConfigHistory(currentHistoryId.value);
  124. message.success('删除历史版本成功');
  125. await loadEditorJsonHistorys();
  126. await loadEditorJson(true);
  127. },
  128. });
  129. }
  130. function exportToJsonFile() {
  131. const json = JSON.stringify(currentEditorJson.value);
  132. const blob = new Blob([json], { type: 'application/json' });
  133. const url = URL.createObjectURL(blob);
  134. const a = document.createElement('a');
  135. a.href = url;
  136. a.download = 'editor.json';
  137. a.click();
  138. }
  139. async function init() {
  140. await loadEditorJsonHistorys();
  141. await loadEditorJson(true);
  142. }
  143. return {
  144. currentEditorJson,
  145. selectedPage,
  146. historyList,
  147. currentConfig,
  148. currentHistoryId,
  149. currentShowConfigName,
  150. saveAsModalVisible,
  151. saveAsVersionName,
  152. saveAsLoading,
  153. loadEditorJson,
  154. loadEditorJsonHistorys,
  155. onSelectDefault,
  156. onSelectHistory,
  157. saveEditorJson,
  158. openSaveAsModal,
  159. confirmSaveAs,
  160. setActiveHistory,
  161. deleteHistory,
  162. exportToJsonFile,
  163. init,
  164. };
  165. }