发布v2.12.1版本，更新内容请查看：https://github.com/bufanyun/hotgo/blob/v2.0/docs/guide-zh-CN/start-update-log.md

2025-12-30 12:05:57 +08:00 · 2023-12-29 20:08:00 +08:00
parent c68004b6da
commit b54055810b
52 changed files with 1468 additions and 1325 deletions
--- a/web/src/views/curdDemo/edit.vue
+++ b/web/src/views/curdDemo/edit.vue
@@ -2,65 +2,69 @@
  <div>
    <n-spin :show="loading" description="请稍候...">
      <n-modal
-        v-model:show="isShowModal"
+        v-model:show="showModal"
+        :mask-closable="false"
        :show-icon="false"
        preset="dialog"
-       :title="params?.id > 0 ? '编辑 #' + params?.id : '添加'"
+        transform-origin="center"
+        :title="formValue.id > 0 ? '编辑 #' + formValue.id : '添加'"
        :style="{
          width: dialogWidth,
        }"
      >
-        <n-form
-          :model="params"
-          :rules="rules"
-          ref="formRef"
-          label-placement="left"
-          :label-width="100"
-          class="py-4"
-        >
-          <n-form-item label="分类ID" path="categoryId">
-            <n-input-number placeholder="请输入分类ID" v-model:value="params.categoryId" />
+        <n-scrollbar style="max-height: 87vh" class="pr-5">
+          <n-form
+            :model="formValue"
+            :rules="rules"
+            ref="formRef"
+            :label-placement="settingStore.isMobile ? 'top' : 'left'"
+            :label-width="100"
+            class="py-4"
+          >
+            <n-form-item label="分类ID" path="categoryId">
+            <n-input-number placeholder="请输入分类ID" v-model:value="formValue.categoryId" />
          </n-form-item>

          <n-form-item label="标题" path="title">
-          <n-input placeholder="请输入标题" v-model:value="params.title" />
+          <n-input placeholder="请输入标题" v-model:value="formValue.title" />
          </n-form-item>

          <n-form-item label="描述" path="description">
-            <n-input type="textarea" placeholder="描述" v-model:value="params.description" />
+            <n-input type="textarea" placeholder="描述" v-model:value="formValue.description" />
          </n-form-item>

          <n-form-item label="内容" path="content">
-            <Editor style="height: 450px" id="content" v-model:value="params.content" />
+            <Editor style="height: 450px" id="content" v-model:value="formValue.content" />
          </n-form-item>

          <n-form-item label="单图" path="image">
-            <UploadImage :maxNumber="1" v-model:value="params.image" />
+            <UploadImage :maxNumber="1" v-model:value="formValue.image" />
          </n-form-item>

          <n-form-item label="附件" path="attachfile">
-            <UploadFile :maxNumber="1" v-model:value="params.attachfile" />
+            <UploadFile :maxNumber="1" v-model:value="formValue.attachfile" />
          </n-form-item>

          <n-form-item label="所在城市" path="cityId">
-            <CitySelector v-model:value="params.cityId" />
+            <CitySelector v-model:value="formValue.cityId" />
          </n-form-item>

          <n-form-item label="显示开关" path="switch">
-            <n-switch :unchecked-value="2" :checked-value="1" v-model:value="params.switch"
+            <n-switch :unchecked-value="2" :checked-value="1" v-model:value="formValue.switch"
        />
          </n-form-item>

          <n-form-item label="排序" path="sort">
-            <n-input-number placeholder="请输入排序" v-model:value="params.sort" />
+            <n-input-number placeholder="请输入排序" v-model:value="formValue.sort" />
          </n-form-item>

          <n-form-item label="状态" path="status">
-            <n-select v-model:value="params.status" :options="options.sys_normal_disable" />
+            <n-select v-model:value="formValue.status" :options="options.sys_normal_disable" />
          </n-form-item>


-        </n-form>
+          </n-form>
+        </n-scrollbar>
        <template #action>
          <n-space>
            <n-button @click="closeForm">取消</n-button>
@@ -73,44 +77,25 @@
 </template>

 <script lang="ts" setup>
-  import { onMounted, ref, computed, watch } from 'vue';
+  import { ref } from 'vue';
  import { Edit, MaxSort, View } from '@/api/curdDemo';
  import Editor from '@/components/Editor/editor.vue';
  import UploadImage from '@/components/Upload/uploadImage.vue';
  import UploadFile from '@/components/Upload/uploadFile.vue';
  import CitySelector from '@/components/CitySelector/citySelector.vue';
  import { rules, options, State, newState } from './model';
+  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useMessage } from 'naive-ui';
  import { adaModalWidth } from '@/utils/hotgo';

-  const emit = defineEmits(['reloadTable', 'updateShowModal']);
-
-  interface Props {
-    showModal: boolean;
-    formParams?: State;
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    showModal: false,
-    formParams: () => {
-      return newState(null);
-    },
-  });
-
-  const isShowModal = computed({
-    get: () => {
-      return props.showModal;
-    },
-    set: (value) => {
-      emit('updateShowModal', value);
-    },
-  });
-
-  const loading = ref(false);
-  const params = ref<State>(props.formParams);
+  const emit = defineEmits(['reloadTable']);
  const message = useMessage();
-  const formRef = ref<any>({});
+  const settingStore = useProjectSettingStore();
  const dialogWidth = ref('75%');
+  const loading = ref(false);
+  const showModal = ref(false);
+  const formValue = ref<State>(newState(null));
+  const formRef = ref<any>({});
  const formBtnLoading = ref(false);

  function confirmForm(e) {
@@ -118,10 +103,10 @@
    formBtnLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {
-        Edit(params.value).then((_res) => {
+        Edit(formValue.value).then((_res) => {
          message.success('操作成功');
          setTimeout(() => {
-            isShowModal.value = false;
+            showModal.value = false;
            emit('reloadTable');
          });
        });
@@ -132,23 +117,22 @@
    });
  }

-  onMounted(async () => {
-    adaModalWidth(dialogWidth);
-  });
-
  function closeForm() {
-    isShowModal.value = false;
+    showModal.value = false;
+    loading.value = false;
  }

-  function loadForm(value) {
+  function openModal(state: State) {
+    adaModalWidth(dialogWidth);
+    showModal.value = true;
    loading.value = true;

    // 新增
-    if (value.id < 1) {
-      params.value = newState(value);
+    if (!state || state.id < 1) {
+      formValue.value = newState(state);
      MaxSort()
        .then((res) => {
-          params.value.sort = res.sort;
+          formValue.value.sort = res.sort;
        })
        .finally(() => {
          loading.value = false;
@@ -157,21 +141,18 @@
    }

    // 编辑
-    View({ id: value.id })
+    View({ id: state.id })
      .then((res) => {
-        params.value = res;
+        formValue.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  }

-  watch(
-    () => props.formParams,
-    (value) => {
-      loadForm(value);
-    }
-  );
+  defineExpose({
+    openModal,
+  });
 </script>

 <style lang="less"></style>
--- a/web/src/views/curdDemo/index.vue
+++ b/web/src/views/curdDemo/index.vue
@@ -76,12 +76,8 @@
        </template>
      </BasicTable>
    </n-card>
-    <Edit
-      @reloadTable="reloadTable"
-      @updateShowModal="updateShowModal"
-      :showModal="showModal"
-      :formParams="formParams"
-    />
+    <Edit @reloadTable="reloadTable" ref="editRef" />
+    <View ref="viewRef" />
  </div>
 </template>

@@ -92,21 +88,21 @@
  import { BasicForm, useForm } from '@/components/Form/index';
  import { usePermission } from '@/hooks/web/usePermission';
  import { List, Export, Delete, Status } from '@/api/curdDemo';
-  import { State, columns, schemas, options, newState } from './model';
+  import { columns, schemas, options } from './model';
  import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@vicons/antd';
-  import { useRouter } from 'vue-router';
  import { getOptionLabel } from '@/utils/hotgo';
  import Edit from './edit.vue';
-  const { hasPermission } = usePermission();
-  const router = useRouter();
-  const actionRef = ref();
+  import View from './view.vue';
+
  const dialog = useDialog();
  const message = useMessage();
+  const { hasPermission } = usePermission();
+  const actionRef = ref();
  const searchFormRef = ref<any>({});
+  const viewRef = ref();
+  const editRef = ref();
  const batchDeleteDisabled = ref(true);
  const checkedIds = ref([]);
-  const showModal = ref(false);
-  const formParams = ref<State>();

  const actionColumn = reactive({
    width: 300,
@@ -170,15 +166,6 @@
    return await List({ ...searchFormRef.value?.formModel, ...res });
  };

-  function addTable() {
-    showModal.value = true;
-    formParams.value = newState(null);
-  }
-
-  function updateShowModal(value) {
-    showModal.value = value;
-  }
-
  function onCheckedRow(rowKeys) {
    batchDeleteDisabled.value = rowKeys.length <= 0;
    checkedIds.value = rowKeys;
@@ -188,13 +175,16 @@
    actionRef.value.reload();
  }

-  function handleView(record: Recordable) {
-    router.push({ name: 'curdDemoView', params: { id: record.id } });
+  function addTable() {
+    editRef.value.openModal(null);
  }

  function handleEdit(record: Recordable) {
-    showModal.value = true;
-    formParams.value = newState(record as State);
+    editRef.value.openModal(record);
+  }
+
+  function handleView(record: Recordable) {
+    viewRef.value.openModal(record);
  }

  function handleDelete(record: Recordable) {
@@ -209,9 +199,6 @@
          reloadTable();
        });
      },
-      onNegativeClick: () => {
-        // message.error('取消');
-      },
    });
  }

@@ -229,9 +216,6 @@
          reloadTable();
        });
      },
-      onNegativeClick: () => {
-        // message.error('取消');
-      },
    });
  }

--- a/web/src/views/curdDemo/model.ts
+++ b/web/src/views/curdDemo/model.ts
@@ -8,59 +8,46 @@ import { isArray, isNullObject } from '@/utils/is';
 import { getFileExt } from '@/utils/urlUtils';
 import { defRangeShortcuts, defShortcuts, formatToDate } from '@/utils/dateUtil';
 import { validate } from '@/utils/validateUtil';
-import { getOptionLabel, getOptionTag, Options, errorImg } from '@/utils/hotgo';
+import { getOptionLabel, getOptionTag, Option, Options, errorImg } from '@/utils/hotgo';

 import { usePermission } from '@/hooks/web/usePermission';
 const { hasPermission } = usePermission();
 const $message = window['$message'];

-
-export interface State {
-  id: number;
-  categoryId: number;
-  title: string;
-  description: string;
-  content: string;
-  image: string;
-  attachfile: string;
-  cityId: number;
-  switch: number;
-  sort: number;
-  status: number;
-  createdBy: number;
-  updatedBy: number;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string;
+export class State {
+  public id = 0; // ID
+  public categoryId = 0; // 分类ID
+  public title = ''; // 标题
+  public description = ''; // 描述
+  public content = ''; // 内容
+  public image = ''; // 单图
+  public attachfile = ''; // 附件
+  public cityId = 0; // 所在城市
+  public switch = 1; // 显示开关
+  public sort = 0; // 排序
+  public status = 1; // 状态
+  public createdBy = 0; // 创建者
+  public updatedBy = 0; // 更新者
+  public createdAt = ''; // 创建时间
+  public updatedAt = ''; // 修改时间
+  public deletedAt = ''; // 删除时间
 }

-export const defaultState: State = {
-  id: 0,
-  categoryId: 0,
-  title: '',
-  description: '',
-  content: '',
-  image: '',
-  attachfile: '',
-  cityId: 0,
-  switch: 1,
-  sort: 0,
-  status: 1,
-  createdBy: 0,
-  updatedBy: 0,
-  createdAt: '',
-  updatedAt: '',
-  deletedAt: '',
+export function newState(state: State | Record<string, any> | null): State {
+  if (state !== null) {
+    if (state instanceof State) {
+      return cloneDeep(state);
+    }
+    return new State(state);
+  }
+  return new State();
+}
+
+export interface IOptions extends Options {
+  sys_normal_disable: Option[]; 
 };

-export function newState(state: State | null): State {
-  if (state !== null) {
-    return cloneDeep(state);
-  }
-  return cloneDeep(defaultState);
-}
-
-export const options = ref<Options>({
+export const options = ref<IOptions>({
  sys_normal_disable: [],
 });

--- a/web/src/views/curdDemo/view.vue
+++ b/web/src/views/curdDemo/view.vue
@@ -1,11 +1,14 @@
 <template>
  <div>
-    <div class="n-layout-page-header">
-      <n-card :bordered="false" title="生成演示详情"> <!-- CURD详情页--> </n-card>
-    </div>
-    <n-card :bordered="false" class="proCard mt-4" size="small" :segmented="{ content: true }">
-      <n-descriptions label-placement="left" class="py-2" column="4">
-        <n-descriptions-item>
+    <n-spin :show="loading" description="请稍候...">
+      <n-drawer v-model:show="showModal" :width="dialogWidth">
+        <n-drawer-content>
+          <template #header> 生成演示详情 </template>
+          <template #footer>
+            <n-button @click="showModal = false"> 关闭 </n-button>
+          </template>
+          <n-descriptions label-placement="left" class="py-2" column="1">
+                <n-descriptions-item>
          <template #label>分类ID</template>
          {{ formValue.categoryId }}
        </n-descriptions-item>
@@ -69,23 +72,25 @@
        </n-descriptions-item>


-      </n-descriptions>
-    </n-card>
+          </n-descriptions>
+        </n-drawer-content>
+      </n-drawer>
+    </n-spin>
  </div>
 </template>

 <script lang="ts" setup>
-  import { computed, onMounted, ref } from 'vue';
-  import { useRouter } from 'vue-router';
+  import { computed, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { View } from '@/api/curdDemo';
-  import { newState, options } from './model';
-  import { getOptionLabel, getOptionTag } from '@/utils/hotgo';
+  import { State, newState, options } from './model';
+  import { adaModalWidth, getOptionLabel, getOptionTag } from '@/utils/hotgo';
  import { getFileExt } from '@/utils/urlUtils';

  const message = useMessage();
-  const router = useRouter();
-  const id = Number(router.currentRoute.value.params.id);
+  const dialogWidth = ref('75%');
+  const loading = ref(false);
+  const showModal = ref(false);
  const formValue = ref(newState(null));
  const fileAvatarCSS = computed(() => {
    return {
@@ -99,12 +104,21 @@
    window.open(url);
  }

-  onMounted(async () => {
-    if (id < 1) {
-      message.error('ID不正确，请检查！');
-      return;
-    }
-    formValue.value = await View({ id: id });
+  function openModal(state: State) {
+    adaModalWidth(dialogWidth, 580);
+    showModal.value = true;
+    loading.value = true;
+    View({ id: state.id })
+      .then((res) => {
+        formValue.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  defineExpose({
+    openModal,
  });
 </script>