版本预发布

web/src/views/curdDemo/edit.vue

@@ -1,74 +1,84 @@
 <template>
   <div>
-    <n-modal
-      v-model:show="isShowModal"
-      :show-icon="false"
-      preset="dialog"
-      :title="params?.id > 0 ? '编辑 #' + params?.id : '添加'"
-      :style="{
-        width: dialogWidth,
-      }"
-    >
-      <n-form
-        :model="params"
-        :rules="rules"
-        ref="formRef"
-        label-placement="left"
-        :label-width="80"
-        class="py-4"
+    <n-spin :show="loading" description="请稍候...">
+      <n-modal
+        v-model:show="isShowModal"
+        :show-icon="false"
+        preset="dialog"
+       :title="params?.id > 0 ? '编辑 #' + params?.id : '添加'"
+        :style="{
+          width: dialogWidth,
+        }"
       >
-        <n-form-item label="分类ID" path="categoryId">
-          <n-input-number placeholder="请输入分类ID" v-model:value="params.categoryId" />
-        </n-form-item>
+        <n-form
+          :model="params"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="80"
+          class="py-4"
+        >
+          <n-form-item label="分类ID" path="categoryId">
+            <n-input-number placeholder="请输入分类ID" v-model:value="params.categoryId" />
+          </n-form-item>
 
-        <n-form-item label="标题" path="title">
+          <n-form-item label="标题" path="title">
           <n-input placeholder="请输入标题" v-model:value="params.title" />
-        </n-form-item>
+          </n-form-item>
 
-        <n-form-item label="描述" path="description">
-          <n-input type="textarea" placeholder="描述" v-model:value="params.description" />
-        </n-form-item>
+          <n-form-item label="描述" path="description">
+            <n-input type="textarea" placeholder="描述" v-model:value="params.description" />
+          </n-form-item>
 
-        <n-form-item label="内容" path="content">
-          <Editor style="height: 450px" v-model:value="params.content" />
-        </n-form-item>
+          <n-form-item label="内容" path="content">
+            <Editor style="height: 450px" v-model:value="params.content" />
+          </n-form-item>
 
-        <n-form-item label="单图" path="image">
-          <UploadImage :maxNumber="1" v-model:value="params.image" />
-        </n-form-item>
+          <n-form-item label="单图" path="image">
+            <UploadImage :maxNumber="1" v-model:value="params.image" />
+          </n-form-item>
 
-        <n-form-item label="附件" path="attachfile">
-          <UploadFile :maxNumber="1" v-model:value="params.attachfile" />
-        </n-form-item>
+          <n-form-item label="附件" path="attachfile">
+            <UploadFile :maxNumber="1" v-model:value="params.attachfile" />
+          </n-form-item>
 
-        <n-form-item label="显示开关" path="switch">
-          <n-switch v-model:value="params.switch" />
-        </n-form-item>
+          <n-form-item label="所在城市" path="cityId">
+            <CitySelector v-model:value="params.cityId" />
+          </n-form-item>
 
-        <n-form-item label="排序" path="sort">
-          <n-input-number placeholder="请输入排序" v-model:value="params.sort" />
-        </n-form-item>
+          <n-form-item label="显示开关" path="switch">
+            <n-switch :unchecked-value="2" :checked-value="1" v-model:value="params.switch"
+        />
+          </n-form-item>
 
-        <n-form-item label="状态" path="status">
-          <n-select v-model:value="params.status" :options="options.sys_normal_disable" />
-        </n-form-item>
-      </n-form>
-      <template #action>
-        <n-space>
-          <n-button @click="closeForm">取消</n-button>
-          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
-        </n-space>
-      </template>
-    </n-modal>
+          <n-form-item label="排序" path="sort">
+            <n-input-number placeholder="请输入排序" v-model:value="params.sort" />
+          </n-form-item>
+
+          <n-form-item label="状态" path="status">
+            <n-select v-model:value="params.status" :options="options.sys_normal_disable" />
+          </n-form-item>
+
+
+        </n-form>
+        <template #action>
+          <n-space>
+            <n-button @click="closeForm">取消</n-button>
+            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
+          </n-space>
+        </template>
+      </n-modal>
+    </n-spin>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { onMounted, ref, computed, watch } from 'vue';
-  import { Edit, MaxSort } from '@/api/curdDemo';
+  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 { useMessage } from 'naive-ui';
   import { adaModalWidth } from '@/utils/hotgo';
@@ -96,10 +106,8 @@
     },
   });
 
-  const params = computed(() => {
-    return props.formParams;
-  });
-
+  const loading = ref(false);
+  const params = ref<State>(props.formParams);
   const message = useMessage();
   const formRef = ref<any>({});
   const dialogWidth = ref('75%');
@@ -132,16 +140,38 @@
     isShowModal.value = false;
   }
 
-  watch(
-    () => params.value,
-    (value) => {
-      if (value.id === 0) {
-        MaxSort().then((res) => {
+  function loadForm(value) {
+    loading.value = true;
+
+    // 新增
+    if (value.id < 1) {
+      params.value = newState(value);
+      MaxSort()
+        .then((res) => {
           params.value.sort = res.sort;
+        })
+        .finally(() => {
+          loading.value = false;
         });
-      }
+      return;
+    }
+
+    // 编辑
+    View({ id: value.id })
+      .then((res) => {
+        params.value = res;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  watch(
+    () => props.formParams,
+    (value) => {
+      loadForm(value);
     }
   );
 </script>
 
-<style lang="less"></style>
+<style lang="less"></style>

web/src/views/curdDemo/index.vue

@@ -2,8 +2,8 @@
   <div>
     <n-card :bordered="false" class="proCard">
       <div class="n-layout-page-header">
-        <n-card :bordered="false" title="生成演示列表">
-          <!--  这里有系统自动生成的CURD表格 -->
+        <n-card :bordered="false" title="生成演示">
+          <!--  这是系统自动生成的CURD表格，你可以将此行注释改为表格的描述 -->
         </n-card>
       </div>
       <BasicForm
@@ -62,7 +62,7 @@
             type="primary"
             @click="handleExport"
             class="min-left-space"
-            v-if="hasPermission(['/demoVar/export'])"
+            v-if="hasPermission(['/curdDemo/delete'])"
           >
             <template #icon>
               <n-icon>
@@ -89,9 +89,9 @@
   import { BasicTable, TableAction } from '@/components/Table';
   import { BasicForm, useForm } from '@/components/Form/index';
   import { usePermission } from '@/hooks/web/usePermission';
-  import { Delete, List, Status, Export } from '@/api/curdDemo';
+  import { List, Export, Delete, Status } from '@/api/curdDemo';
   import { State, columns, schemas, options, newState } from './model';
-  import { DeleteOutlined, PlusOutlined, ExportOutlined } from '@vicons/antd';
+  import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@vicons/antd';
   import { useRouter } from 'vue-router';
   import { getOptionLabel } from '@/utils/hotgo';
   import Edit from './edit.vue';
@@ -246,4 +246,4 @@
   }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>

web/src/views/curdDemo/model.ts

@@ -8,12 +8,13 @@ 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 } from '@/utils/hotgo';
-import { errorImg } from '@/utils/hotgo';
+import { getOptionLabel, getOptionTag, 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;
@@ -22,6 +23,7 @@ export interface State {
   content: string;
   image: string;
   attachfile: string;
+  cityId: number;
   switch: number;
   sort: number;
   status: number;
@@ -40,6 +42,7 @@ export const defaultState = {
   content: '',
   image: '',
   attachfile: '',
+  cityId: 0,
   switch: 1,
   sort: 0,
   status: 1,
@@ -61,7 +64,8 @@ export const options = ref<Options>({
   sys_normal_disable: [],
 });
 
-export const rules = {};
+export const rules = {
+};
 
 export const schemas = ref<FormSchema[]>([
   {
@@ -217,6 +221,10 @@ export const columns = [
     title: '创建时间',
     key: 'createdAt',
   },
+  {
+    title: '修改时间',
+    key: 'updatedAt',
+  },
   {
     title: '分类名称',
     key: 'testCategoryName',
@@ -225,15 +233,17 @@ export const columns = [
 
 async function loadOptions() {
   options.value = await Dicts({
-    types: ['sys_normal_disable'],
+    types: [
+      'sys_normal_disable',
+   ],
   });
   for (const item of schemas.value) {
     switch (item.field) {
       case 'status':
         item.componentProps.options = options.value.sys_normal_disable;
         break;
-    }
+     }
   }
 }
 
-await loadOptions();
+await loadOptions();

web/src/views/curdDemo/view.vue

@@ -45,6 +45,11 @@
           </div>
         </n-descriptions-item>
 
+        <n-descriptions-item>
+          <template #label>所在城市</template>
+          {{ formValue.cityId }}
+        </n-descriptions-item>
+
         <n-descriptions-item label="显示开关">
           <n-switch v-model:value="formValue.switch" :unchecked-value="2" :checked-value="1" :disabled="true"
         /></n-descriptions-item>