发布v2.15.7版本，更新内容请查看：https://github.com/bufanyun/hotgo/tree/v2.0/docs/guide-zh-CN/addon-version-upgrade.md

web/src/views/curdDemo/edit.vue

@@ -63,16 +63,6 @@
         />
                 </n-form-item>
               </n-gi>
-              <n-gi span="1">
-                <n-form-item label="状态" path="status">
-                  <n-select v-model:value="formValue.status" :options="options.sys_normal_disable" />
-                </n-form-item>
-              </n-gi>
-              <n-gi span="1">
-                <n-form-item label="测试分类" path="categoryId">
-                  <n-select v-model:value="formValue.categoryId" :options="options.testCategoryOption" />
-                </n-form-item>
-              </n-gi>
             </n-grid>
           </n-form>
         </n-spin>
@@ -93,8 +83,9 @@
 
 <script lang="ts" setup>
   import { ref, computed } from 'vue';
+  import { useDictStore } from '@/store/modules/dict';
   import { Edit, View, MaxSort } from '@/api/curdDemo';
-  import { options, State, newState, rules } from './model';
+  import { State, newState, rules } from './model';
   import Editor from '@/components/Editor/editor.vue';
   import UploadImage from '@/components/Upload/uploadImage.vue';
   import UploadFile from '@/components/Upload/uploadFile.vue';
@@ -106,6 +97,7 @@
   const emit = defineEmits(['reloadTable']);
   const message = useMessage();
   const settingStore = useProjectSettingStore();
+  const dict = useDictStore();
   const loading = ref(false);
   const showModal = ref(false);
   const formValue = ref<State>(newState(null));
@@ -144,25 +136,28 @@
       });
   }
 
+  // 提交表单
   function confirmForm(e) {
     e.preventDefault();
-    formBtnLoading.value = true;
     formRef.value.validate((errors) => {
       if (!errors) {
-        Edit(formValue.value).then((_res) => {
-          message.success('操作成功');
-          setTimeout(() => {
+        formBtnLoading.value = true;
+        Edit(formValue.value)
+          .then((_res) => {
+            message.success('操作成功');
             closeForm();
             emit('reloadTable');
+          })
+          .finally(() => {
+            formBtnLoading.value = false;
           });
-        });
       } else {
         message.error('请填写完整信息');
       }
-      formBtnLoading.value = false;
     });
   }
 
+  // 关闭表单
   function closeForm() {
     showModal.value = false;
     loading.value = false;
@@ -173,4 +168,4 @@
   });
 </script>
 
-<style lang="less"></style>
+<style lang="less"></style>

web/src/views/curdDemo/index.vue

@@ -50,7 +50,8 @@
   import { BasicTable, TableAction } from '@/components/Table';
   import { BasicForm, useForm } from '@/components/Form/index';
   import { usePermission } from '@/hooks/web/usePermission';
-  import { List, Export, Delete } from '@/api/curdDemo';
+  import { useDictStore } from '@/store/modules/dict';
+  import { List, Export, Delete, Status } from '@/api/curdDemo';
   import { PlusOutlined, ExportOutlined, DeleteOutlined } from '@vicons/antd';
   import { columns, schemas, loadOptions } from './model';
   import { adaTableScrollX } from '@/utils/hotgo';
@@ -59,6 +60,7 @@
   const dialog = useDialog();
   const message = useMessage();
   const { hasPermission } = usePermission();
+  const dict = useDictStore();
   const actionRef = ref();
   const searchFormRef = ref<any>({});
   const editRef = ref();
@@ -66,7 +68,7 @@
   const checkedIds = ref([]);
 
   const actionColumn = reactive({
-    width: 144,
+    width: 216,
     title: '操作',
     key: 'action',
     fixed: 'right',
@@ -80,6 +82,22 @@
             auth: ['/curdDemo/edit'],
           },
 
+          {
+            label: '禁用',
+            onClick: handleStatus.bind(null, record, 2),
+            ifShow: () => {
+              return record.status === 1;
+            },
+            auth: ['/curdDemo/status'],
+          },
+          {
+            label: '启用',
+            onClick: handleStatus.bind(null, record, 1),
+            ifShow: () => {
+              return record.status === 2;
+            },
+            auth: ['/curdDemo/status'],
+          },
           {
             label: '删除',
             onClick: handleDelete.bind(null, record),
@@ -170,9 +188,20 @@
     Export(searchFormRef.value?.formModel);
   }
 
+  // 修改状态
+  function handleStatus(record: Recordable, status: number) {
+    Status({ id: record.id, status: status }).then((_res) => {
+      message.success('设为' + dict.getLabel('sys_normal_disable', status) + '成功');
+      setTimeout(() => {
+        reloadTable();
+      });
+    });
+  }
+
   onMounted(() => {
     loadOptions();
+
   });
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>

web/src/views/curdDemo/model.ts

@@ -1,15 +1,16 @@
 import { h, ref } from 'vue';
-import { NImage, NAvatar, NSwitch, NTag } from 'naive-ui';
+import { NImage, NAvatar, NSwitch } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { FormSchema } from '@/components/Form';
-import { Dicts } from '@/api/dict/dict';
-import { isNullObject } from '@/utils/is';
 import { getFileExt } from '@/utils/urlUtils';
 import { defRangeShortcuts } from '@/utils/dateUtil';
-import { Option, errorImg, getOptionLabel, getOptionTag } from '@/utils/hotgo';
+import { fallbackSrc } from '@/utils/hotgo';
 import { renderPopoverMemberSumma, MemberSumma } from '@/utils';
 import { Switch } from '@/api/curdDemo';
+import { useDictStore } from '@/store/modules/dict';
 import { usePermission } from '@/hooks/web/usePermission';
+
+const dict = useDictStore();
 const { hasPermission } = usePermission();
 const $message = window['$message'];
 
@@ -76,12 +77,6 @@ export const rules = {
     type: 'number',
     message: '请输入排序',
   },
-  categoryId: {
-    required: true,
-    trigger: ['blur', 'input'],
-    type: 'number',
-    message: '请输入测试分类',
-  },
 };
 
 // 表格搜索表单
@@ -119,19 +114,6 @@ export const schemas = ref<FormSchema[]>([
       },
     },
   },
-  {
-    field: 'status',
-    component: 'NSelect',
-    label: '状态',
-    defaultValue: null,
-    componentProps: {
-      placeholder: '请选择状态',
-      options: [],
-      onUpdateValue: (e: any) => {
-        console.log(e);
-      },
-    },
-  },
   {
     field: 'createdBy',
     component: 'NInput',
@@ -156,19 +138,6 @@ export const schemas = ref<FormSchema[]>([
       },
     },
   },
-  {
-    field: 'categoryId',
-    component: 'NSelect',
-    label: '测试分类',
-    defaultValue: null,
-    componentProps: {
-      placeholder: '请选择测试分类',
-      options: [],
-      onUpdateValue: (e: any) => {
-        console.log(e);
-      },
-    },
-  },
   {
     field: 'testCategoryName',
     component: 'NInput',
@@ -212,8 +181,7 @@ export const columns = [
         width: 32,
         height: 32,
         src: row.image,
-        fallbackSrc: errorImg,
-        onError: errorImg,
+        fallbackSrc: fallbackSrc(),
         style: {
           width: '32px',
           height: '32px',
@@ -270,30 +238,6 @@ export const columns = [
       });
     },
   },
-  {
-    title: '状态',
-    key: 'status',
-    align: 'left',
-    width: 100,
-    render(row) {
-      if (isNullObject(row.status)) {
-        return ``;
-      }
-      return h(
-        NTag,
-        {
-          style: {
-            marginRight: '6px',
-          },
-          type: getOptionTag(options.value.sys_normal_disable, row.status),
-          bordered: false,
-        },
-        {
-          default: () => getOptionLabel(options.value.sys_normal_disable, row.status),
-        }
-      );
-    },
-  },
   {
     title: '创建者',
     key: 'createdBy',
@@ -324,30 +268,6 @@ export const columns = [
     align: 'left',
     width: 180,
   },
-  {
-    title: '测试分类',
-    key: 'categoryId',
-    align: 'left',
-    width: 100,
-    render(row) {
-      if (isNullObject(row.categoryId)) {
-        return ``;
-      }
-      return h(
-        NTag,
-        {
-          style: {
-            marginRight: '6px',
-          },
-          type: getOptionTag(options.value.testCategoryOption, row.categoryId),
-          bordered: false,
-        },
-        {
-          default: () => getOptionLabel(options.value.testCategoryOption, row.categoryId),
-        }
-      );
-    },
-  },
   {
     title: '关联分类',
     key: 'testCategoryName',
@@ -356,27 +276,7 @@ export const columns = [
   },
 ];
 
-// 字典数据选项
-export const options = ref({
-  sys_normal_disable: [] as Option[],
-  testCategoryOption: [] as Option[],
-});
-
 // 加载字典数据选项
 export function loadOptions() {
-  Dicts({
-    types: ['sys_normal_disable', 'testCategoryOption'],
-  }).then((res) => {
-    options.value = res;
-    for (const item of schemas.value) {
-      switch (item.field) {
-        case 'status':
-          item.componentProps.options = options.value.sys_normal_disable;
-          break;
-        case 'categoryId':
-          item.componentProps.options = options.value.testCategoryOption;
-          break;
-      }
-    }
-  });
-}
+  dict.loadOptions(['sys_normal_disable', 'testCategoryOption']);
+}

web/src/views/curdDemo/view.vue

@@ -1,123 +0,0 @@
-<template>
-  <div>
-    <n-drawer v-model:show="showModal" :width="dialogWidth">
-      <n-drawer-content title="CURD列表详情" closable>
-        <n-spin :show="loading" description="请稍候...">
-          <n-descriptions label-placement="left" class="py-2" column="1">
-            <n-descriptions-item label="测试分类">
-              <n-tag :type="getOptionTag(options.testCategoryOption, formValue?.categoryId)" size="small" class="min-left-space">
-                {{ getOptionLabel(options.testCategoryOption, formValue?.categoryId) }}
-              </n-tag>
-            </n-descriptions-item>
-            <n-descriptions-item>
-              <template #label>
-                标题
-              </template>
-              {{ formValue.title }}
-            </n-descriptions-item>
-            <n-descriptions-item>
-              <template #label>
-                描述
-              </template>
-              <span v-html="formValue.description"></span>
-            </n-descriptions-item>
-            <n-descriptions-item>
-              <template #label>
-                内容
-              </template>
-              <span v-html="formValue.content"></span>
-            </n-descriptions-item>
-            <n-descriptions-item>
-              <template #label>
-                所在城市
-              </template>
-              {{ formValue.cityId }}
-            </n-descriptions-item>
-            <n-descriptions-item>
-              <template #label>
-                排序
-              </template>
-              {{ formValue.sort }}
-            </n-descriptions-item>
-            <n-descriptions-item>
-              <template #label>
-                单图
-              </template>
-              <n-image style="margin-left: 10px; height: 100px; width: 100px" :src="formValue.image"/>
-            </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>
-            <n-descriptions-item>
-              <template #label>
-                附件
-              </template>
-              <div class="upload-card"  v-show="formValue.attachfile !== ''" @click="download(formValue.attachfile)">
-                <div class="upload-card-item" style="height: 100px; width: 100px">
-                  <div class="upload-card-item-info">
-                    <div class="img-box">
-                      <n-avatar :style="fileAvatarCSS">
-                        {{ getFileExt(formValue.attachfile) }}
-                      </n-avatar>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </n-descriptions-item>
-            <n-descriptions-item label="状态">
-              <n-tag :type="getOptionTag(options.sys_normal_disable, formValue?.status)" size="small" class="min-left-space">
-                {{ getOptionLabel(options.sys_normal_disable, formValue?.status) }}
-              </n-tag>
-            </n-descriptions-item>
-          </n-descriptions>
-        </n-spin>
-      </n-drawer-content>
-    </n-drawer>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { computed, ref } from 'vue';
-  import { useMessage } from 'naive-ui';
-  import { View } from '@/api/curdDemo';
-  import { State, newState, options } from './model';
-  import { adaModalWidth, getOptionLabel, getOptionTag } from '@/utils/hotgo';
-  import { getFileExt } from '@/utils/urlUtils';
-
-  const message = useMessage();
-  const loading = ref(false);
-  const showModal = ref(false);
-  const formValue = ref(newState(null));
-  const dialogWidth = computed(() => {
-    return adaModalWidth(580);
-  });
-  const fileAvatarCSS = computed(() => {
-    return {
-      '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
-      '--n-font-size': `18px`,
-    };
-  });
-
-  //下载
-  function download(url: string) {
-    window.open(url);
-  }
-
-  function openModal(state: State) {
-    showModal.value = true;
-    loading.value = true;
-    View({ id: state.id })
-      .then((res) => {
-        formValue.value = res;
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  }
-
-  defineExpose({
-    openModal,
-  });
-</script>
-
-<style lang="less" scoped></style>