refactor: ♻️ 支持CURD演示示例切换

src/views/demo/curd/config/content2.ts

@@ -5,7 +5,9 @@ const contentConfig: IContentConfig = {
   table: {
     showOverflowTooltip: true,
   },
+  toolbar: [],
   indexAction: function (params) {
+    // 模拟发起网络请求获取列表数据
     // console.log("indexAction:", params);
     return Promise.resolve({
       total: 2,
@@ -44,11 +46,13 @@ const contentConfig: IContentConfig = {
     });
   },
   modifyAction(data) {
-    console.log("modifyAction:", data);
+    // 模拟发起网络请求修改字段
+    // console.log("modifyAction:", data);
+    ElMessage.success(JSON.stringify(data));
     return Promise.resolve(null);
   },
   cols: [
-    { type: "selection", width: 50, align: "center" },
+    { type: "index", width: 50, align: "center" },
     { label: "ID", align: "center", prop: "id", show: false },
     { label: "用户名", align: "center", prop: "username" },
     { label: "图片", align: "center", prop: "avatar", templet: "image" },
@@ -106,14 +110,6 @@ const contentConfig: IContentConfig = {
       templet: "date",
       dateFormat: "YYYY/MM/DD HH:mm:ss",
     },
-    {
-      label: "操作",
-      align: "center",
-      fixed: "right",
-      width: 150,
-      templet: "tool",
-      operat: ["edit", "delete"],
-    },
   ],
 };
 

src/views/demo/curd/index.vue

@@ -1,62 +1,78 @@
 <template>
   <div class="app-container">
-    <el-link
-      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/curd/index.vue"
-      type="primary"
-      target="_blank"
-      class="mb-10"
-    >
-      示例源码 请点击>>>>
-    </el-link>
-
-    <!-- 搜索 -->
-    <page-search
-      ref="searchRef"
-      :search-config="searchConfig"
-      @query-click="handleQueryClick"
-      @reset-click="handleResetClick"
-    />
+    <div class="flex-x-between mb-10">
+      <el-link
+        href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/curd/index.vue"
+        type="primary"
+        target="_blank"
+      >
+        示例源码 请点击>>>>
+      </el-link>
+      <el-button type="primary" plain round size="small" @click="isA = !isA">
+        切换示例
+      </el-button>
+    </div>
 
     <!-- 列表 -->
-    <page-content
-      ref="contentRef"
-      :content-config="contentConfig"
-      @add-click="handleAddClick"
-      @edit-click="handleEditClick"
-      @export-click="handleExportClick"
-      @search-click="handleSearchClick"
-      @toolbar-click="handleToolbarClick"
-      @operat-click="handleOperatClick"
-      @filter-change="handleFilterChange"
-    >
-      <template #status="scope">
-        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
-          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
-        </el-tag>
-      </template>
-    </page-content>
+    <template v-if="isA">
+      <!-- 搜索 -->
+      <page-search
+        ref="searchRef"
+        :search-config="searchConfig"
+        @query-click="handleQueryClick"
+        @reset-click="handleResetClick"
+      />
 
-    <!-- 新增 -->
-    <page-modal
-      ref="addModalRef"
-      :modal-config="addModalConfig"
-      @submit-click="handleSubmitClick"
-    >
-      <template #gender="scope">
-        <dictionary v-model="scope.formData[scope.prop]" type-code="gender" />
-      </template>
-    </page-modal>
+      <!-- 列表 -->
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig"
+        @add-click="handleAddClick"
+        @edit-click="handleEditClick"
+        @export-click="handleExportClick"
+        @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick"
+        @operat-click="handleOperatClick"
+        @filter-change="handleFilterChange"
+      >
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
 
-    <!-- 编辑 -->
-    <page-modal
-      ref="editModalRef"
-      :modal-config="editModalConfig"
-      @submit-click="handleSubmitClick"
-    >
-      <template #gender="scope">
-        <dictionary v-model="scope.formData[scope.prop]" type-code="gender" />
-      </template>
-    </page-modal>
+      <!-- 新增 -->
+      <page-modal
+        ref="addModalRef"
+        :modal-config="addModalConfig"
+        @submit-click="handleSubmitClick"
+      >
+        <template #gender="scope">
+          <dictionary v-model="scope.formData[scope.prop]" type-code="gender" />
+        </template>
+      </page-modal>
+
+      <!-- 编辑 -->
+      <page-modal
+        ref="editModalRef"
+        :modal-config="editModalConfig"
+        @submit-click="handleSubmitClick"
+      >
+        <template #gender="scope">
+          <dictionary v-model="scope.formData[scope.prop]" type-code="gender" />
+        </template>
+      </page-modal>
+    </template>
+    <template v-else>
+      <page-content ref="contentRef" :content-config="contentConfig2">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
+    </template>
   </div>
 </template>
 
@@ -66,7 +82,7 @@ import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
-// import contentConfig from "./config/content2";
+import contentConfig2 from "./config/content2";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
 
@@ -120,4 +136,7 @@ function handleOperatClick(data: IOperatData) {
     });
   }
 }
+
+// 切换示例
+const isA = ref(true);
 </script>